Potter's Blog

努力成为更强大的自我

0%

Github + Hexo + Next 搭建个人博客网站

发表于 分类于 阅读次数： Valine：

概要内容

  • 搭建步骤
  • 安装环境
  • 图床加速、集成Gitalk、集成Valine
  • 绑定域名、版权配置、赞赏、站点加速等

搭建原因：几年前一直在CSDN写博客，经常用心写的文章，结果过一段时间文章关联的图片全部丢失，给他们反馈无果，图片丢失也找不回。后面就转用印象笔记，几年下来记录了不少笔记，但是发现还是缺少一个互动的环节，不知道自己写的笔记有没有问题，没法与他人发生碰撞。想快速产生好的想法或者更好的解决方案，看到网上不少朋友都写在自己博客网站上，于是就决定自己也搭一个，一来记录自己成长，二来与大家互动让自己的知识得到升华，而且个人博客也显的逼格更高。 呵呵~ 以下是我零碎2~3天搭自己博客网站的步骤，希望能给后面的人提供帮助。

搭建步骤：

Github 创建博客仓库

在 GitHub 新建一个仓库（Repository），名称为 {username}.github.io，注意这个名比较特殊，必须要是 github.io 为后缀结尾的。比如：aa4790139.github.io

安装环境

在本机安装Node.js

安装Hexo

1
2
3
mkdir /d/Work/Projects/PotterBlog
cd /d/Work/Projects/PotterBlog
npm install -g hexo-cli

初始化Hexo项目

1
hexo init blog

  • 如果出现以下情况报错：

    解决办法：关闭npm 的https

    1
    npm config set strict-ssl false

编译生成&本地启动

1
2
3
cd blog
hexo generate
hexo server

等启动完后浏览器打开http://localhost:4000，看到hello world 博客页面，说明你成功）

切换主题为Next

  • 首先：clone next 主题

    1
    git clone https://github.com/theme-next/hexo-theme-next themes/next

  • 其次：修改项目根目录下的 _config.yml，找到theme字段，更改为next即可

  • 最后：修改主题next的默认的相关配置，主题配置文件路径：themes/next/_config.yml (
    具体怎么配置看这篇文章相关部分即可：https://www.cxyxiaowu.com/6407.html

创建文章

  • 命令：(提示：运行如下命令后，文章会生成到source/_posts下)

    1
    hexo new hello-world

  • 文章开头格式规范：(提示：按此格式方便编译识别标题、时间、类别等)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ---
    title: 标题 # 自动创建，如 hello-world
    tags: 
    - 标签1
    - 标签2
    - 标签3
    categories:
    - 分类1
    - 分类2
    ---

创建Github 编写Markdown文章的图床

  1. github 创建BlogPicBed 仓库
  2. 创建个人访问令牌
  3. 下载PicGo (目的：利用此工具上传图片至Github创建的BlogPicBed仓库中)
  4. PicGo 配置成Github,如下图所示
  5. 利用PicGo 上传一张图片，然后去BlogPicBed仓库的img文件夹找到你刚刚上传的图片，然后右键复制图片链接地址
  6. 使用Github 图床仓库的图片地址(提示：复制的图片地址是不带raw参数的，所以需要手动在地址后面拼”?raw=true” 否则图片不会显示)
    1
    比如：![](https://github.com/aa4790139/BlogPicBed/blob/master/img/2.png?raw=true)

    使用jsdelivr CDN加速图床： 

    1
    2
    格式：https://cdn.jsdelivr.net/gh/github账号/图床仓库名@版本/仓库图片相对路径
    比如：https://cdn.jsdelivr.net/gh/aa4790139/BlogPicBed@master/img/2.png

集成Gitalk

  1. 获取GitHub OAuth授权(参考文章：GitHub OAuth 第三方登录示例教程)
  2. GitHub 创建留言仓库BlogGitTalk(注意：此仓库必须为公开仓库，不能为私有仓库)
  3. themes/_config.yml 找到gitalk，配置如下样子
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    gitalk:
      enable: true
      github_id: github账号 # GitHub repo owner
      repo: BlogGitTalk # Repository name to store issues
      client_id: GitHub OAuth授权申请下来的client_id # GitHub Application Client ID
      client_secret: GitHub OAuth授权申请下来的client_secret # GitHub Application Client Secret
      admin_user: github账号 # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
      distraction_free_mode: true # Facebook-like distraction free mode
      # Gitalk's display language depends on user's browser or system environment
      # If you want everyone visiting your site to see a uniform language, you can set a force language value
      # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
      language: zh-CN

集成Valine

  1. 注册leancloud账号
  2. leancloud 创建应用
  3. themes/_config.yml 找到valine，配置如下样子
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    valine:
      enable: true
      appid: leancloud 创建的应用AppID # Your leancloud application appid
      appkey: leancloud 创建的应用appkey # Your leancloud application appkey
      notify: false # Mail notifier
      verify: false # Verification code
      placeholder: Just go go # Comment box placeholder
      avatar: mm # Gravatar style
      guest_info: nick,mail,link # Custom comment header
      pageSize: 10 # Pagination size
      language: zh-cn # Language, available values: en, zh-cn
      visitor: true # Article reading statistic
      comment_count: true # If false, comment count will only be displayed in post page, not in home page
      recordIP: false # Whether to record the commenter IP
      serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
      #post_meta_order: 0

部署至Github

  • 打开blog根目录下的_config.yml配置,找到Deployment, 配置参考如下
1
2
3
4
deploy:
  type: git
  repo: git@github.com:github用户名/github用户名.github.io.git
  branch: master

  • 安装hexo-deployer-git 部署插件

    1
    npm install hexo-deployer-git --save

  • 部署

    • 在根目录新建部署脚本deploy.sh，内容如下：
      1
      2
      3
      hexo clean
      hexo generate
      hexo deploy

    • 运行部署命令:

      1
      sh deploy.sh

绑定域名

  1. 阿里云购买域名:
  2. 获取github上博客项目域名的ip
    1
    ping github用户名.github.io
  3. 阿里云平台域名绑定博客域名ip(第2步ping出来的ip)

版权配置

  1. next/_config.yum 找到creative_commons
  2. 配置成如下样子：
    1
    2
    3
    4
    5
    creative_commons:
      license: by-nc-sa
      sidebar: false
      post: true
      language: zh-CN

QQ交流平台：

hexo next主题交流：1076692090

参考文献：

特别致谢：

以上: 如发现有问题，欢迎留言指出，我及时更正

如何文章对你有益，请给我买杯豆浆喝