基于Hexo+Node.js+github/coding搭建个人博客总结

参考博客
https://www.cnblogs.com/imsoft/p/6724990.html
https://www.cnblogs.com/fengxiongZz/p/7707219.html

前言

博主之前的博客使用的是worpdress框架,自己够买了一个京东云主机,将其安装在服务器上。wordpress的功能还是很强大的,但同时随着不断安装插件也会变得比较臃肿,访问量大的话就会比较慢。如果不用插件来实现有些效果对于我这个搞android的程序猿来说相对比较复杂,光是代码高亮就弄了好长时间,而且效果还不太乐观,真的是隔行如隔山,而且wordpress对markdown支持的不太好。

Hexo是一个静态博客框架,界面简洁。相对与wordpress的博客的优点是不用自己购买服务器,省了一笔不小的开支。在本地电脑上用markdown写好文章后,将代码托管在github(国外)或者codingpage(国内)上,然后绑定域名就可以访问了。这样的缺点就是自己博客的代码放在远程仓库,别人可以随便将自己的源码clone到自己的电脑上,没有安全感。

用了一段时间wordpress后,感觉虽然它功能比较强大,但是有些东西设置起来实在麻烦,对markdown支持不友好,而自己平时又经常用马克飞象在印象笔记上写笔记,所以最终决定使用Hexo搭建一个博客来发表技术类的文章。

Hexo博客搭建的大致流程为:

博主搭建Hexo的环境是Ubuntu 16.04。

一、安装Node.js

此处使用源文件编译安装,自己是在root用户下安装的。
首先需要配置安g++编译器

1
sudo apt-get install build-essential

Node.js官网下载源码,选择下图中的Source Code,进行下载

将下载的压缩文件解压到某一目录,然后进入此目录,执行以下三条命令

1
2
3
./configure
make
sudo make install

检查Node.js是否安装好

1
node -v


安装npm

1
curl http://npmjs.org/install.sh | sudo sh

二、安装Git

自己电脑上之前已经安装了Git,Ubuntu下安装Git只需输入一条命令:

1
sudo apt-get install git

查看Git是否安装成功

1
git --version

三、安装Hexo

在安装好Node.js与Git后,开始安装Hexo,只需输入如下命令即可:

1
npm install -g hexo-cli

四、本地测试运行

随便创建一个文件夹,然后用命令cd进入到该文件夹,执行以下命令

1
2
hexo init  # hexo会在目标文件夹建立网站所需要的所有文件
npm install # 安装依赖包

启动本地服务

1
2
hexo g # 等同于hexo generate,生成静态文件
hexo s # 等同于hexo server,在本地服务器运行

当出现下图效果后说明启动成功

然后在浏览器输入 http://localhost:4000/ ,出现下图说明hexo已经可以在本地运行了

五、安装主题

Hexo有许多漂亮的主题,此处以Next主题为例。

下载主题

在博客的根目录下执行如下命令

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

打开站点的配置文件,找到 theme 字段,并将其值更改为 next

虽然他们的文件名都是_config.yml,但是路径不一样,作用也不一样
站点配置文件的路径:博客根目录中
主题配置文件的路径:根目录的themes文件夹中对应的主题文件夹中

再次执行 hexo clean 和 hexo s 可以预览新主题的效果
有关NextT主题的详细配置参考NexT的官方文档

六、注册Github和Coding并创建Pages服务

本地测试运行没问题,安装了自己想要的主题后,接下就需要将博客部署到服务器上。这里的服务器可以是自己购买的云服务器,例如阿里云、腾讯云等,也可以使用github或者coding pages(国内访问比较快)提供的pages服务。

6.1注册Github和Coding的注意事项

注册Github和Coding此处不再赘述,可以参考博客基于Hexo+Node.js+github+coding搭建个人博客——基础篇,需要注意以下事项:

  • github仓库的名字格式一定要是:{user_name}.github.io,其中{user_name}必须与你的用户名一样,这是github pages的特殊命名规范,自己的是bailangsyc.github.io,bailangsyc是github的账户的名称
  • coding仓库的格式和github类似,自己的是bailangsyc.coding.mebailangsyc是coding的用户名
  • 默认都是master分支,使用hexo -d 命令推送的是渲染后的博客的静态文件,都是推送到master分支,推送的并不是博客的源文件,此处一定要注意。如果想要备份博客的源文件,就需要建立一个单独的分支来管理。下边会单独介绍如何备份博客,并多设备同步博客。

6.2配置SSH与Git

关于ssh的原理网上有许多解释,这里使用的是ssh的公钥登录,可以省去输入密码的步骤。具体的原理可以参考博客SSH原理与运用(一):远程登录

生成SSH Key

执行下边命令生成ssh key

1
ssh-keygen -t rsa -C your_email@youremail.com

后面的 your_email@youremail.com 改为你的邮箱,之后会要求确认路径和输入密码,我们这使用默认的一路回车就行。成功的话会在~/下生成 .ssh 文件夹,进去,打开 id_rsa.pub,复制里面的key,粗暴点就是 Ctrl+a 然后 Ctrl+c

添加SSH Key

首先是Github,登录Github,右上角 头像 -> Settings —> SSH nd GPG keys —> New SSH key 。把公钥粘贴到key中,填好title并点击 Add SSH key

至于Coding,登录进入主页,点击 账户 —> SSH公钥 —> 输入key再点击 添加

验证成功与否

验证github

1
ssh -T git@github.com

如果是第一次的会提示是否continue,输入yes就会看到:You’ve successfully authenticated, but GitHub does not provide shell access 。这就表示已成功连上github!

验证coding

1
ssh -T git@git.coding.net

接下来我们要做的就是把本地仓库传到github上去,在此之前还需要设置username和email,因为github每次commit都会记录他们

1
2
git config --global user.name your name
git config --global user.email your_email@youremail.com

七、部署到Github与Coding(待总结)

此处需要总结如何部署和预览博客,并且提供一个多设备同步博客的链接

八、绑定域名

京东申请的域名不提供多线路解析,但是万网申请的却可以。

九、搭建过程和踩过的坑

主要是根据参考博客一来进行搭建的,自己电脑用的是ubuntu16.04

2.在github和codingpage中创建项目的格式一定要注意

格式一定严格按照如下格式,否则无法访问到博客:
    github创建仓库的格式:Github昵称.github.io
    codingPage创建仓库的格式:codingpage的昵称.coding.me.git

3.访问博客的格式:

github托管访问方式:https://bailangsyc.github.io/
codingpage托管访问方式:http://bailangsyc.coding.me/

4.修改站点配置文件的时候一定要注意空格的问题

发布博客需要修改站点配置文件_config.yml(在博客的根目录下,themes目录下也有一个同样文件名的配置文件)

注意:下方代码 type:和git之间;repo:和git@;branch:和master之间一定要留出两个空格,一定要注意空格的问题,因为这个问题自己耽误了大半天,下边提交博客的时候输入 hexo d命令总是没有反应

如果只是托管到github,则可以按如下代码配置_config.yml文件():

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

如果需要同时托管到github和codingPage则可以按照如下格式配置:

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: git@github.com:bailangsyc/bailangsyc.github.io.git,master
coding: git@git.coding.net:bailangsyc/bailangsyc.coding.me.git,master

5.学习hexo各个目录的用途

参考博客:http://www.jianshu.com/p/b7886271e21a

6.本地预览
当更换主题或者本地写文章的时候可以先在本地调试,没有问题了再向远程仓库提交。启动本地服务的命令(博客根目录输入)

1
2
hexo s 
hexo s --debug //debug调试

此时即可使用浏览器访问 http://localhost:4000 ,查看站点是否正确运行。

7.发布博客
例如:发布一篇名字为“我是好人”的博客
7.1 命令进入博客的根目录
7.2 新建文章

1
2
hexo new "我是好人"
文章的路径:\source\_posts\我是好人.md

7.3 新建页面(这个一般也用不到,具体有什么用以后再研究)

1
\source\_posts\category.md

7.4 编辑文章,直接编辑\source_posts\我是好人.md文件就可以了
7.5 提交文章(下方的命令都是在博客的根目录中执行的)

1
2
3
hexo clean
hexo g
hexo d

绑定域名、自动部署、博客美化等知识点日后有时间再学习!