使用 Hexo 搭建 Blog

此文介绍使用 Hexo + Github 架构搭建个人博客的详细步骤
最近更新:2018-09-28
操作系统:MacOS 10.13.6

【转自 Shelton Lee 的博客】Shelton Lee

本地博客仓库

  • 安装 Node

  • 安装 Hexo

    1
    $ sudo npm install -g hexo
  • 初始化博客

    在本地建立一个文件夹作为存放博客的仓库(名字任意),例如 MyBlog

    进入文件夹,执行初始化。

    1
    2
    3
    $ mkdir MyBlog
    $ cd MyBlog
    $ hexo init
  • 生成静态文件

    使用 hexo ghexo generate 命令生成静态页面。

    1
    $ hexo g
    • 本地启动服务器

      使用 hexo shexo server 启动本地服务器,可以在本地查看、调试博客。

      1
      $ hexo s
    • 浏览器输入 http://localhost:4000 即可查看

    • 使用组合键 ctrl + c 关闭本地服务器

  • 监视文件变动

    1
    2
    3
    $ hexo generate --watch
    # or
    $ hexo g -w


Github 托管

  • 安装 Git

  • 拥有一个 Github 账户

  • 建立托管仓库

    仓库的名字必须是 your_github_username.github.io

    例如我的 Github 账户名是 WaterH2P ,我的仓库名称就是 WaterH2P.github.io (暂时不清楚大小写是否敏感)。

  • Github 仓库与本地博客仓库建立关联。

    • 打开本地博客仓库配置文件 _config.yml

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      // 本地博客仓库目录结构如下
      MyBlog
       |
       |-- node_modules
       |-- public
       |-- scaffolds
       |-- source
       |-- themes
       |-- db.json
       |-- _config.yml
       |-- package.json

      将配置文件中 deploy 相关字段修改为

      1
      2
      3
      4
      deploy:
      type: git
      repository: https://github.com/your_github_username/your_github_username.github.io.git
      branch: master

      执行以下命令使用 Git 部署

      1
      2
      $ npm install hexo-deployer-git --save
      $ hexo deploy

      打开 http://your_github_username.github.io/ 就可以查看博客了。

  • 添加博文

    将文章放在 MyBlog/source/_posts 文件夹下即可,文章支持Markdown格式。

    然后生成静态页面并部署,具体命令如下:

    1
    2
    3
    $ hexo clean
    $ hexo generate
    $ hexo deploy

    或者用一条命令

    1
    2
    3
    $ hexo clean && hexo g && hexo d
    # or
    $ hexo g -d

    接着就可以看到你的博客内容更新了。


使用主题

Hexo 主题列表


绑定个人域名

  • 购买域名(我是在腾讯云注册的域名)

  • 添加 CNAME 文件

    在博客所在的主目录下的 source 文件夹下创建 CNAME 文件,文件内容写你注册的顶级域名

    1
    example.com

    我写的就是 waterh2p.cn

    然后执行以下命令部署到Github上

    1
    $ hexo g && hexo d
  • DNS 配置

    腾讯云控制台 / 我的域名 / 域名解析 添加记录

    1
    2
    3
    主机记录        记录类型        记录值                              TTL
    @ A 185.199.110.153 600
    www CNAME WaterH2P.github.io. 600

    其中 185.199.110.153ping WaterH2P.github.io 得到的 IP 地址。

    可以 ping your_github_username.github.io 获得自己的 IP 地址。

    然后等几分钟,具体几分钟不知道。我等了好久好久。。。