用Hexo搭建博客

发表于 | 分类于 | | 阅读次数:
| 字数统计: 3.1k

最近用hexo搭建了自己的博客，之前是挂在GitHub上，今天又将博客放在了自己的服务器上，中间遇到了不少坑，分享一下搭建博客的过程。

hexo相关文章：

Maupassant主题个性化

将Hexo部署到vps，实现自动发布

[TOC]

用到的工具

  • Git
  • Nodejs
  • Hexo
  • Github Pages
  • SSH配置
  • 域名解析

大概就这些吧。

本地建站

  1. 安装Hexo

    根据官方文档，安装Hexo的前提是先安装Node.js和Git(安装过程很简单，网上有很多教程，此处不详细展开)

    安装Hexo只需要在终端(cmd、Git bash、Node.js、command prompt均可)中敲入如下命令：

    1
    npm install -g hexo-cli

  2. 建立站点

  • 在电脑中建立准备搭建博客的文件夹，比如文件夹D:\Blog；
  • 在终端切换到Blog文件夹
  • 如果默认的npm镜像太慢，可以切换到淘宝镜像或者使用代理
1
npm config set registry "https://registry.npm.taobao.org"
  • 依此执行下面两条命令，初始化hexo，安装npm
1
2
hexo init
npm install

执行完这两条命令后，Blog下的目录结构如下：

目录结构

  • 目录结构说明：
  • _config.yml 文件存放着网站的配置信息，可以在这里配置大部分的参数。
  • package.json 文件存放着插件信息，从中可以查看那些插件已经安装。
  • scaffolds 是模板文件夹，新建文章时，Hexo 会根据 scaffold 来建立文件，不过这个模板和后面的主题里指的模板不一样。
  • source 是存放用户资源的地方的文件夹，除 _posts 文件夹之外，开头命名为 _ (下划线) 的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹（别急，等下会生成的），而其他文件会被拷贝过去。
  • themes 主题文件夹，Hexo 会根据主题来生成静态页面，我们以后自己安装的主题也都会放在这个文件夹下面，默认的 landscape 主题已经在里面了。
  1. 修改配置文件
  • 在_config.yml文件中，我们暂时可以修改其中的title，subtitle和author,替换成自己网站的名字和作者名字即可。
  1. 添加文章
  • 在 _posts 文件夹下，新建一个 Markdown 文件，或者把你以前有的 Markdown 文件复制进来，根据 Hexo 的官方文档 基本操作 — Front-matter ，写好你的第一篇文章。
  • 其中首部的两条---分割线内的内容即为Front-matter
  • 在终端输入
1
hexo generate

Hexo 会替我们刚加入到 _posts 文件夹下的 markdown 文件生成静态文件。运行 hexo server 可以在 http://localhost:4000/ 中看到我们新添加的网页内容了。至此，我们采用默认主题 landscape 的网站已经生成了，且相信你已经掌握了关于 Hexo 的大部分操作，如果自感还不熟悉，可以再看看 Hexo 的官方文档 开始使用 — 命令，

  • 主要是下面几个命令：
  • hexo init [folder]: 新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站；
  • hexo generate: 生成静态文件；
  • hexo server: 启动服务器。默认情况下，访问网址为： http://localhost:4000/；
  • hexo deploy: 部署网站（后文会用得）；
  • hexo clean: 清除缓存文件 (db.json) 和 public 文件夹下已生成的静态文件。
  1. 更换主题

我们可以去 Themes | Hexo 中挑选喜欢的主题。

1
2
3
$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
$ npm install hexo-renderer-pug --save
$ npm install hexo-renderer-sass --save

依此执行上面三条命令，完成安装

  • 然后将Blog/_config.yml中的theme的值又默认的landscape改为maupassant。
  • 再次在终端输入
1
2
3
hexo clean
hexo generate
hexo server

现在我们就可以在本地4000端口查看网站的样式

部署到GitHub

  1. 创建GitHub仓库

要在 Github 上创建项目，当然首先需要注册 Github帐号。在注册完成后，Github 的官方文档 Create a new repository on GitHub 已经图文并茂将如何建立一个 repository 交待得非常清楚明白了，唯一要注意的是，第二步里的 Repository name 一定要是 your_name.github.io ，your_name 是你的 Github 用户名。

  1. 配置Git

根据 Github 的官方文档 Setting up Git，这一操作的目的是 Tell Git your name so your commits will be properly labeled 和 Tell Git the email address that will be associated with your Git commits，也就是告诉版本控制软件 Git 接下来这台电脑上提交的文件是 E-mail 地址是什么的谁谁谁提交的。在 Git Bash 中执行如下代码即可：

1
2
git config --global user.name "YOUR NAME"
git config --global user.email "YOUR EMAIL ADDRESS"

其中，YOUR NAME 是自己取的名字，YOUR EMAIL ADDRESS 是自己的邮箱。由于自己的博客网站就自己一个人提交，所以就都设置成跟 Github 用户名和邮箱相同了。但其实是可以不同的，因为对于很多项目，并不只有一个开发者，Github 允许多人向同一个 Repo 提交，这里提供用户名和邮箱，只是为了搞清楚哪些代码是谁谁谁提交的。

  • 生成SSH key

根据 Github 的官方文档 Generating a new SSH key ， 我们在 Git Bash 下执行如下命令，生成 SSH key

1
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

其中，`your_email@example.com` 是你的 Github 注册邮箱。然后，Git Bash 中会出现

1
Generating public/private rsa key pair.

表示新的 SSH 已经生成了。随后会出现

1
2
Enter a file in which to save the key
(/Users/you/.ssh/id_rsa): [Press enter]

这里 id_rsa 是生成的 key 文件的文件名，默认都是这个；如果不是，在后面用到 id_rsa 的地方请替换成出现的名字。这条信息是让你选择 SSH key 存放的地点，按回车选择默认的即可。回车后，还会出现

1
2
Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]

让你设置使用 SSH 密钥时的密码，由于我们都是在自己个人的电脑上操作，所以仍然回车，不设置密码即可。

  • 将SSH key添加到ssh-agent

根据 Wikipedia，ssh-agent 是一个在本地登录会话持续时间内，将未加密的密钥存储在内存中，并使用 Unix 域套接字与 SSH 客户端进行通信的程序。根据 Github 的官方文档 Adding your SSH key to the ssh-agent ， 我们在 Git Bash 下执行如下命令，开启 ssh-agent

1
eval "$(ssh-agent -s)"

然后我们要将这个 SSH key 添加到 ssh-agent 里去，运行如下命令，其中 id_rsa 是你的 key 文件的文件名：

1
ssh-add ~/.ssh/id_rsa
  • 将SSH key 添加到 GitHub 账户

Github 的官方文档 Adding a new SSH key to your GitHub account 已经图文并茂将如何在 Github

帐号中添加 SSH 介绍的非常清楚了。先是在 Git Bash 中将 SSH Key 拷贝出来：

1
2
$ clip < ~/.ssh/id_rsa.pub
# Copies the contents of the id_rsa.pub file to your clipboard

id_rsa 是你刚才的 SSH Key 文件。此时，SSH Key 已经在我们的剪切板里了。然后登录 Github 帐号，依次点击自己的头像，Settings，SSH and GPG keys，New SSH key 或者 Add SSH key， 在 Title 这里输入 Key 的label，比如 your_name - PC，然后在 Key 里面把 SSH Key 粘贴进去，点击 Add SSH key 大功告成。

回想一下，操作了那么多 SSH 相关的命令，我们在干嘛？个人的理解，就是在生成身份认证的凭证 SSH key，分别放在自己本地电脑和 Github 服务器上，以后向 Github 提交内容的时候，两者的 Key 匹配就可以了，省去了我们每次输密码的时间。

  • 测试SSH连接

在大功告成之前，为了稳妥起见，我们来测试一下自己跟 Github 服务器 SSH 连接是否已经建立起来了。Github 的官方文档 Testing your SSH connection 已经将次环节介绍得非常详细了。我们要做得就是在 Git Bash 中敲入

1
ssh -T git@github.com

你可能会看到类似于

1
2
3
The authenticity of host 'github.com (192.30.252.1)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

没关系的，输入 yes 敲回车，就可以看到如下的成功信息了

1
2
Hi username! You've successfully authenticated, but GitHub does not
provide shell access.

至此为止，我们已经建立起了跟 Github 服务器的连接。其实我们也可以用 git push 命令，提交 public 文件夹下面的内容，不过 Hexo 更我们提供了更方便的途径。

  1. Hexo 部署

Hexo 提供了 hexo deploy 命令，可以方便地将整个 public 文件夹部署到 Github 服务器上去。根据 Hexo 的官方文档 基本操作 — 部署 我们只需要做以下两步：

  • 安装hexo-deployer-git插件：
1
npm install hexo-deployer-git --save
  • 修改_config.yml中的参数：
1
2
3
4
deploy:
  type: git
  repo: https://github.com/your_name/your_name.github.io.git
  branch: master

其中，your_name 是你的 Github 帐号名。repo 对应的是你 your_name.github.io 这个项目的库（Repository）地址，进入这个项目的主页，点击 Clone or download 下拉菜单也能看到。branch 是分支名称，如果使用的是 GitHub 或 GitCafe 的话，程序会尝试自动检测，通常都是 master。 注意，冒号后的空格非常重要，一定要有！

绑定独立域名

看到这里，恭喜你已经拥有了域名为 your_name.github.io 的个人博客网站了，进一步的，就是希望能够在浏览器中输入自己的域名，比如 your.site，就可以看到自己的网站。停下来思考一下，要实现这一目的，我们需要干什么？首先，当然我们要去买一个域名。买完域名后呢？怎么要让浏览器知道这个域名对应的网站内容在 Github 服务器上？这就是域名解析的事情啦。这是浏览器这里，还有 Github 服务器呢？Github 服务器上存放着那么多个人网站，怎么在收到浏览器一个要访问我的域名为 your.site这个站点内容的时候，准确的把我的站点的内容送出来呢？这就是要在自己提交的 public 文件夹下添加 CNAME 文件了。一共 3 个环节，我们一个一个来介绍。

  1. 购买域名

我的域名是在阿里云的万网上买的

  1. 域名解析

阿里云提供域名的免费解析，当然你也可以其他的域名解析服务

  • 告诉 GitHub your_name.github.io 对应那个域名

在 source 文件夹下添加一个 CNAME 文件，里面就一行内容，写上自己的域名，比如 your.site。 在终端中运行

1
hexo generate

Hexo 在生成 public 文件夹内容的时候，会自动把 CNAME 文件复制过去，这样，public 文件夹下就也有 CNAME 文件了。再运行

1
hexo deploy

将其部署到 Github，让 Github 知道 your_name.github.io 对应哪个域名。

Donate comment here
-------------本文结束感谢您的阅读-------------
0%