hexo+github page助我搭建博客

Hexo框架,是快速、简单且功能强大的 Node.js 博客框架,支持Makedown语法,有很多简约美观的主题可选,可以快速在几分钟内生成静态页面,同时可以结合Github Pages,将博客部署到Github Pages上。
hexo网站:https://hexo.io/zh-cn/docs/index.html

搭建步骤

  1. 环境配置 -> 本地安装hexo
  2. 在github上创建一个${yourname}.github.io的库,并部署
  3. 购买域名并解析
  4. 后记

环境配置

本地安装git和nodejs
git教程
nodejs安装

本地安装hexo并配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 全局安装hexo
npm install -g hexo-cli

// 创建站点
cd myfolder // 到任意自己喜欢的目录下
hexo init my-blogs // 结果显示的最后: INFO Start blogging with Hexo!

// 到站点下
cd my-blogs/ (ls看文件结构)
.
├── _config.yml // 网站的配置信息
├── db.json
├── node_modules // 应用程序依赖文件
├── package.json // 应用程序的信息
├── public
├── scaffolds // 模板文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件
├── source // 资源文件夹是存放用户资源的地方
└── themes // 主题文件夹。Hexo 会根据主题来生成静态页面。安装默认的是landscape主题;

// 可以尝试新建博文
hexo new 'new blog'
// 执行后,可以在myblog/source/_post目录下看到了“new blog.md“的新博客文章,可以使用支持makedown语法编辑

// 生成静态文件
hexo generate(或 hexo g)
// 站点目录下多了一个“public”的文件夹

启动服务器
hexo server (或 hexo s)

此时,在浏览器输入http:localhost:4000/,可看到个人博客,因为hexo开启了本地服务器;

github建立GitHub.io的库

建立新库, 新库的名字: ${github用户名}.github.io,如,我的是aline2013.github.io

部署博客到github Page

用hexo deploy进行部署(也有其他方法,如git push)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 在站点目录下,安装hexo-deployer-git
cd myblogs
npm install hexo-deployer-git -save

// 用编辑器打开目录下的配置文件,_config.yml
// 最后一行:
ploxy:

// 添加内容后为
deploy:
type: git
repo: https://github.com/aline2013/aline2013.github.io.git
branch: master

// 其中,repo:是这个库的git的远程地址,还有, 一定要注意键值对冒号之后要有一个空格,否则hexo部署不成功

1
2
// 执行部署
hexo deploy

部署成功后,可以在浏览器输入http://${yourname}.github.io,即可看到博客,以后重新部署静态页面只需要先执行hexo g,然后hexo deploy即可。
但是,这时还不是自己的网站

购买域名并解析

购买域名

在阿里云购买域名,网站: https://wanwang.aliyun.com/?spm=5176.3047821.1.3.2a7aha
下载自己喜欢的域名,可以是me,比较普遍的是com;

解析

登陆阿里云,进入控制台

左侧栏,点击域名,然后进入解析页面


点击页面页面上的 进入高级设置

也可参考官方介绍:
https://help.aliyun.com/knowledge_detail/39788.html

完成后,到myBlogs/public下,新建CHNAME文件,内容写上自己的域名

然后,更新上github,执行部署:

1
hexo d

成功的话,进入到你的github仓库中会看到CNAME文件。
为了防止域名解析出问题,建议将blog下的public下的CNAME文件,复制到blog下的source文件夹里,这样更新public,不会出现CNAME文件丢失的情况。

此时在浏览器输入,自己的域名,就可以看到自己的博客了(比如我的:http://aline2013.com)。

后记

如果输入后发现打不开,可以测试域名解析是否生效,方法路径:https://help.aliyun.com/knowledge_detail/39834.html?spm=5176.7839833.2.1.EMO808
并修改自己的解析配置即可

比如我的:
ping aline2013.com
(PING github.map.fastly.net (151.101.72.133): 56 data bytes)

0%