如何在github pages上搭建自己的博客

发表于 更新于 分类于 阅读次数：

摘要：成功在github pages上建好自己的博客后，马上写一篇来练练手。本文的目的是帮助懂一点程序的朋友搭建自己的博客。

Git的使用

这部分相信大多数程序员已经掌握，这里不再详述，详细git教程可以看 廖雪峰的官方网站。没用过git的也不用担心，你只需了解几条基本的命令即可。

Github Pages的使用

github 是一个分布式的开源代码库，简单说就是存放代码的地方。而github pages是github的一项服务，它可以让你的某个项目以网站的形式展现。

  1. 注册一个github账号，比如你的账户为USERNAME
  2. 创建一个项目，项目名为 USERNAME.github.io
  3. 在项目根目录创建一个index.html文件，随便写点东西，这就是你的网站首页
  4. 提交你的代码，使用命令git commit和git push（注意：需要提交到master分支）
  5. 在浏览器地址栏输入 http://USERNAME.github.io 即可访问你自己的网站。虽然很丑，但是网站已经有了。接下来要做的就是把你的网页放到这个项目里，提交并推送到远端。然而直接编写html文件太繁琐（当然不是不会），所以我们用一些工具来帮助生成html网页。

用 hexo 生成网页

hexo 官方地址：https://hexo.io/zh-cn/

  1. 安装node.js
    Node.js中文网：http://nodejs.cn/
    安装完成后就可以在命令行使用npm命令安装hexo了。
  2. 进入合适的目录下安装hexo
1
2
3
4
C:\Users\dq>E:
E:\>cd gitRepo\dqv5.com
E:\gitRepo\dqv5.com>npm install hexo-cli -g
fetchMetadata -> network  - |##################-------

等待安装…因为是在线安装，可能速度比较慢。如果实在太慢，请更换源。

  1. 初始化
1
E:\gitRepo\dqv5.com>hexo init

出现下面的提示说明初始化完成。

1
INFO  Start blogging with Hexo!
  1. 在本地运行
1
hexo server

在地址栏输入 http://127.0.0.1:4000/ 查看被hexo初始化网站

开始写博客

  1. 创建一篇博客hexo new [layout] <title>
  2. 找到source/_posts文件夹下刚刚创建的文件，开始编辑。要说明的是，博文都是以.md结尾的markdown文件，书写需符合markdown语法。
    关于markdown的介绍请看这篇 认识与入门 Markdown
  3. 文章写好了，执行hexo server（简写hexo s）在本机运行，访问 http://127.0.0.1:4000/ 查看刚刚写的文章。
  4. 文章写得不错，发布到我的网站。执行hexo g命令，发现生成了一个public目录，将此目录里的全部内容复制到USERNAME.github.io
    项目中，提交并推送到远程。
  5. 访问 http://USERNAME.github.io 是不是可以看到刚刚写好的文章了？^_^

进阶玩法

博客里添加图片

你需要的只是一个图片的网络地址而已，你可以把图片上传到项目，也可以使用图床（图片服务器）。推荐七牛
，目前我用的是极简图床。
把图片上传到图床，得到一个地址，再用以下方式插入到文章的适当位置。
![图片说明文字](图片url)

hexo更改主题

选择一款喜欢的主题（参考1参考2），在themes/文件夹下新建一个目录，把选好的主题文件放到该目录下，并在配置文件_config.yml中启用该主题。
我选用的是next

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

_config.yml文件中的设置：

1
theme: next

使用自己的域名

  1. 首先你需要租用一个域名，比如我的 dqv5.com（.cn域名需要备案）,建议去万网购买，一般一年的费用在几元到几十元之间。
  2. 然后登陆阿里云控制台，找到“域名”–“解析”，进入域名控制台。
  3. 添加一条解析记录，记录类型为 CNAME， 记录值为 USERNAME.github.io
  4. 在你的 USERNAME.github.io 项目根目录下创建一个CNAME文件（没有扩展名）,文件内容填写你的域名（不用写www）
  5. 试着访问自己的域名吧

自动部署

使用命令 hexo deploy（简写hexo d）

安装 hexo-deployer-git。

1
$ npm install hexo-deployer-git --save

修改_config.yml配置

1
2
3
4
5
deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]

以后就可以hexo g加hexo d两条命令部署到github上了
注意：如果需要在添加自定义文件（如readme或CNAME），请将这些文件放在source目录下

FQ

搞程序的不会FQ可不行啊，推荐两个工具：

不推荐了