Hexo搭建个人博客

准备工作

了解Hexo

Hexo 是高效的静态站点生成框架,她基于Node.js。 通过 Hexo 你可以轻松地使用 Markdown 编写文章,除了 Markdown 本身的语法之外,还可以使用 Hexo 提供的标签插件来快速的插入特定形式的内容,而且相对于其他框架,Hexo在速度上也有很大优势。

搭建Node.js环境

我们了解到Hexo基于Node.js的,那么我们搭建博客网站首先需要安装Node.js环境。 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,可以在非浏览器环境下,解释运行 JS 代码。

点击下载 Node.js

测试安装:命令行使用 node -vnpm -v 查看显示版本号即成功。

安装Hexo博客框架工具

Hexo是一个建站工具,可以帮助我们快速生成基本的博客文件,安装它需要在控制台下使用如下命令:

1
npm install hexo-cli -g

安装Git版本工具

Git是目前世界上最流行的分布式版本控制系统,是的,没有之一。使用Git可以帮助我们把本地的网页和文章等内容提交到Gihub上,实现同步。

点击下载 Git

Windows系统需下载,Mac系统因为自带Git无需操作。
测试安装:命令行使用 git --version 查看显示版本号即成功。

注册Github账号

Github是一个面向开源及私有软件项目的托管平台,因为只支持 git 作为唯一的版本库格式进行托管,故名Github。这里用到Github,是因为我们需要通过Github得到自己的博客网站域名,而且需要使用Github同步我们个人博客的相关文件。

注册地址: Github 官网
注册流程: 百度一下,你就知道

开始搭建博客

搭建我们的个人博客需要一个唯一的域名,当然我们可以申请购买一个域名来使用,但是在不是太必要的情况下,我们也可以通过Github Pages获得一个免费使用的域名,这需要我们在Github上新建一个仓库

勾选 Initialize this repository with a README 避免后面不必要的麻烦

其中的 %username% 替换成Github用户名

这个过程和建立普通的仓库没什么区别,关键在于新仓库的名字,一定要是 %username% +“github.io”的形式。这也是之前强调的要起一个好的用户名的原因。这样之后我们最后的博客网站的链接就会是:https://%username%.github.io的形式。
注意:固定新仓库的名字格式并非必须,只是这样操作生成的博客域名比较短小简洁,另起他名生成博客域名会很冗长。

点击Create Repository之后,随后选择Setting进入设置,找到Github Pages

这里我们需要点击Choose a theme任意选择一个选择主题,然后界面会跳转到仓库,我们看到有两个文件

此时若再查看Setting,我们会看到开启GitHub Pages之后得到的域名

现在,我们就可以使用 https://%username%.github.io 访问自己的博客网站了,打开链接我们会看到默认主题的个人博客样式

创建本地博客站点

上述的步骤相当于我们使用Github page,创建了一个默认的博客页,并且得到了一个可外部访问的域名。但是这个博客页很Low。我们的目的是创建自己个性化的博客网站,所以我们使用Hexo在本地先创建一个本地博客站点,优化后再把它部署到Github上。接下来我们使用控制台命令在本地一个合适的位置创建博客站点文件夹如下:

安装Hexo,在自己认为合适的地方创个文件夹,我是在E盘建了一个blog文件夹。然后通过命令行进入到该文件夹里面

输入 npm install hexo -g 开始安装Hexo

输入 hexo -v 检查Hexo是否安装成功

输入 hexo init 初始化该文件夹

看到后面的 Start blogging with Hexo! 表示成功

输入 npm install 安装所需要的组件

输入 hexo g g是generetor的缩写,生成博客

输入 hexo s s是server的缩写,启动服务,访问该网址,正式体验Hexo

问题:假如页面一直无法跳转,那么可能端口被占用了。此时我们ctrl+c停止服务器,接着输入 hexo server -p 端口号 来改变端口号

同步Github,允许公共访问

在本地我们已经搭建了博客,但是还只能自己本地访问。若要别人也能看到,那就需要我们将其同步部署到GitHub上了。还记得我们之前准备的Github仓库吗,这里就要用到了。
首先找到我们的博客仓库,并拷贝仓库地址:

修改本地博客根目录下的_config.yml文件,修改deploy下的配置如下:

修改repository值为上面拷贝的仓库地址

1
2
3
4
deploy:
type: git
repository: git@github.com:%username%/%username%.github.io.git
branch: master

Git安装后,右键有 Git Base Here 在本地博客文件夹打开

将Hexo与Github page联系起来,设置Git的username和email

1
2
git config --global user.name "Github用户名"
git config --global user.email "Github绑定的邮箱"

输入 cd ~/.ssh 检查是否由.ssh的文件夹

输入 ls 列出该文件下的内容

输入 ssh-keygen -t rsa -C "Github绑定的邮箱" 连续三个回车,生成密钥

最后得到了两个文件:id_rsa和id_rsa.pub(默认存储路径是:C:\Users\Administrator\.ssh

输入 eval "$(ssh-agent -s)" 添加密钥到ssh-agent

输入 ssh-add ~/.ssh/id_rsa 添加生成的SSH key到ssh-agent

登录Github,点击头像下的Settings进入SSH and GPG keys选项,添加SSH keys

新建一个New SSH key,将id_rsa.pub文件里的内容复制上去

输入 ssh -T git@github.com 测试添加ssh是否成功。如果看到Hi后面是你的用户名,就说明成功了

新建一篇博客,用控制台定位到本地博客文件夹执行命令 hexo new "My New Post"

这时候在文件夹_posts目录下将会看到已经创建的文件

在生成以及部署文章之前,需要安装一个扩展:npm install hexo-deployer-git --save

使用编辑器编好文章,那么就可以使用命令: hexo d -g 生成以及部署了

部署成功后访问你的地址将看到生成的文章