0%

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

概要内容

  • 搭建步骤
  • 安装环境
  • 图床加速、集成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

参考文献:


特别致谢:


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

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