Hexo+GitHub 搭建个人网站

什么是Hexo ?

Hexo是一个基于Node.js的静态博客程序,其编译上百篇文字只需要几秒。hexo生成的静态网页可以直接放到GitHub Pages,BAE,SAE等平台上。

环境准备

Node + Github + 支持Markdown语法的编辑器(如Sublime、MWeb等)

创建托管仓库

登录Github之后,点击页面右上角的加号,选择New repository

配置SSH密钥

让本地Github项目与远程的github建立联系,让我们在本地写了代码之后直接通过Github操作就可以实现本地代码库与Github代码库同步。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 1. 看看本机是否存在SSH keys
cd ~/. ssh

// 2. 根据邮箱地址创建一对新的SSH密钥(keys)
ssh-keygen -t rsa -C "joewang@qianshengqian.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]

// 3. 将公钥的内容复制到系统粘贴板(clipboard)中
pbcopy < ~/.ssh/id_rsa.pub

// 4. 看看设置是否成功
ssh -T git@github.com

// 5. 设置用户信息
git config --global user.name "joewang" //用户名
git config --global user.email "joewang@qianshengqian.com" //填写自己的邮箱

安装 Hexo

创建Hexo文件夹,然后执行

1
hexo init

目录结构

本地查看效果

1
2
hexo generate   // 或者 hexo g
hexo server // 或者 hexo s

登录localhost:4000,即可看到本地的效果如下

部署

打开 _config.yml,将github托管的SSH类型地址粘贴到这里

关于什么是yml和为什么yml文件作为配置文件

在Blog文件夹下执行

1
2
3
4
hexo g
hexo d

// 或者直接执行:hexo g -d

假如这时候,报错 ERROR Deployer not found: Github,那么就是你的deployer没有安装成功,你需要执行如下命令再安装一次

1
npm install hexo-deployer-Github --save

访问:joewang.github.io

报错(这是个大坑)

解决:
点击 settings 进行我们的仓库配置,之后找到 GitHubPages 进行页面的配置,domain 就是我们需要设置域名的地方,我们输入完成我们的域名之后,进行绑定(点击Save)就可以了,

这时,仓库目录下面看到一个名字为CNAME的文件

解析

我们需要建立两个域名解析条例,先去阿里云购买一个域名,随便一个都可以,几块钱。

  • CNAME 地址,我们在记录里面写的是www,然后指向了我们的github域名(cname类型的解析为域名解析到域名)
  • A 记录是记录 IP 的,我们先要ping一下我们自己的主页的地址,我的就是ping joewang.github.io ,然后可以得到一个IP地址

    1
    2
    wdy@wdydeMacBook-Pro  ~  ping joewang.github.io
    PING joewang.github.io (185.199.110.153): 56 data bytes

注意:注册一个域名。在中国的话,.cn全都需要进行备案,如果不想备案的话,请注册别的顶级域名,可以使用godaddy或新网或万网中的任意一家,自己权衡价格即可。 然后,我们需要配置一下域名解析。推荐使用DNSPod的服务,比较稳定,解析速度比较快。在域名注册商出修改NS服务器地址为:

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

线上效果

直接访问:http://www.joewang.cn/






配置主题

如果你不喜欢Hexo默认的主题,可以更换不同的主题,这个是官方主题库:Themes,还有Gihub上的收集

可以在blog目录中的themes文件夹中查看你自己主题是什么,默认是 landsacpe

比较喜欢的主题:snippet

安装方法:

Github clone git://github.com/shenliyang/hexo-theme-snippet.Github themes/hexo-theme-snippet

安装完成后,打开hexo_config.yml,修改主题为 snippet

写文章

1
hexo new "Hexo+GitHub 搭建个人网站"

常用的Hexo 命令

最后,整理常用的Hexo 命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

命令简写
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

目录介绍

  • .deploy:执行hexo deploy命令部署到GitHub上的内容目录
  • public:执行hexo generate命令,输出的静态网页内容目录
  • scaffolds:layout模板文件目录,其中的md文件可以添加编辑
  • source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
    • _drafts:草稿文章
    • _posts:发布文章
  • themes:主题文件目录
  • _config.yml:全局配置文件,大多数的设置都在这里
  • package.json:应用程序数据,指明hexo的版本等信息

参考资料