用Hexo在Github上搭建静态博客

本文主要是关于如何在本地搭建Hexo博客, 并且将它同步到github page, 添加个性域名. 作为记录以防忘记

本地搭建Hexo流程

准备工作

安装git

  • Windows:下载并安装 git.
  • Mac:使用 Homebrew, MacPortsbrew install git;或下载 安装程序 安装。
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

Windows 用户

由于众所周知的原因,从上面的链接下载git for windows最好挂上一个代理,否则下载速度十分缓慢。也可以参考这个页面,收录了存储于百度云的下载地址。

安装 Node.js

对于非windows用户, 安装 Node.js 的最佳方式是使用 nvm

cURL:

1
$ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

Wget:

1
$ wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

安装完成后,重启终端并执行下列命令即可安装 Node.js。

1
$ nvm install stable

或者您也可以下载 安装程序 来安装。

Windows 用户

对于windows用户来说,建议使用安装程序进行安装。安装时,请勾选Add to PATH选项。
另外,您也可以使用Git Bash,这是git for windows自带的一组程序,提供了Linux风格的shell,在该环境下,您可以直接用上面提到的命令来安装Node.js。打开它的方法很简单,在任意位置单击右键,选择“Git Bash Here”即可。由于Hexo的很多操作都涉及到命令行,您可以考虑始终使用Git Bash来进行操作。

安装 Hexo

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

1
$ npm install -g hexo-cli

本地搭建Hexo

安装 Hexo 完成后,执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件. 一般的我会将它直接命名为blog

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install // 好像现在不用运行这步了

新建完成后,创建的文件夹的目录如下:

1
2
3
4
5
6
7
8
.
├── _config.yml // 配置文件
├── package.json //应用程序的信息
├── scaffolds // 模块文件夹
├── source // 资源文件夹是存放用户资源的地方
| ├── _drafts
| └── _posts
└── themes

调试运行博客:

1
hexo server

此时, 访问本地localhost:4000可以看到博客已经搭建成功.

ctrl+c可结束运行

将博客与github关联

创建github仓库

  • 到github.com注册/登录自己的账号, 用户名为xxx, 下面以我自己的用户名shawnlinq为例
  • 在github上创建shawnlinq.github.io的项目. 可初始化readme.md

配置git信息(方便hexo和github通过ssh通信)

  • user name和email:(如果是第一次的话)
1
2
git config --global user.name "shawnlinq"
git config --global user.email "shawn_linq@163.com"
  • 查看是否配置成功:

    1
    2
    git config --global user.name
    git config --global user.email
  • 生成密钥

1
ssh-keygen -t rsa -C "shawn_linq@163.com"

在/Users/shawn/.ssh/目录下会生成两个文件id_rsa和id_rsa.pub

  • 将id_rsa.pub文件中的内容添加到github上的SSH Keys上

SSH Keys

配置hexo的部署信息

在blog项目根目录下里找到_config.yml文件,找到Deployment,然后按照如下修改:

1
2
3
4
deploy:
type: git
repo: git@github.com:shawnlinq/shawnlinq.github.io.git
branch: master

将hexo部署到github上

  • hexo-deployer-git自动部署发布工具
1
npm install hexo-deployer-git --save
  • 生成静态文件部署到github
1
2
hexo clean
hexo -g d

此时, 可通过链接进行访问: shawnlinq.github.io

绑定自己的域名

购买自己域名

可以在万网等地方购买域名. 不过万网需要实名认证

测试对应的解析ip

按Win+R, 输入cmd, 进入终端, 输入:

1
ping shawnlinq.github.io

Ping

则对应的IP为185.199.111.153

域名提供商中添加解析:

根据上面步骤得出的ip, 在域名提供商中添加解析:

  • 添加A记录:

    1
    @—>185.199.111.153
  • 添加一条CNAME记录(www):

    1
    CNAME—>shawnlinq.github.io
  • github上的shawnlinq.github.io上的Settings处, 添加自己的域名shawnlin.cc, 并开启Https:

    开启个性域名

  • 等待完成后, 即可通过shawnlin.cc进行访问

永久访问

此时有一个问题是每次更新博客都要在github上设置一次的个性域名, 这是因为在更新博客的时候会把CNAME文件给删除, 我们在blog/source目录添加一个CNAME文件可解决. 注意文件无后缀. 键入shawnlin.cc保存即可