Hexo+Github Page搭建个人博客

什么是Hexo?Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。堪称在座各位喜欢Markdown的优雅人士博客建站神器哟!

1. Quick Start

1.1 创建存放Github Pages的仓库

Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务,站点可以被免费托管在 Github 上,你可以选择使用 Github Pages 提供的域名 github.io 或者自定义域名来发布站点。

需要Github账号,请登录https://github.com/ 注册。
登录了自己的github账号后,可以安装下图一样,创建自己的GitHub Pages仓库名[参考https://pages.github.com/ ],[PS] 仓库名repository name需要约定为: 你的账号名.github.io

创建Github Pages

创建好博客项目仓库后,可以通过git命名下载到本地,并编辑一下README.md从本地提交到GitHub,这样做主要是使本地文件与Github关联起来,方便后面hexo deploy,直接部署博客内容到GitHub进行更新。

$ git clone https://github.com/yourGithubName/yourGithubName.github.io
$ vim README.md
# REAMME.md上可以简单写一些博客介绍啥的
$ git config --global user.email "[email protected]"
$ git config --global user.name "Your Name"
$ git add ./
$ git commit -m 'test'
$ git push -u origin master
Username for 'https://github.com': Builder34
Password for 'https://[email protected]':

1.2 Hexo安装

安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:

  • Node.js (请看https://nodejs.org/zh-cn/)
  • Git (请看https://git-scm.com/downloads)
    安装好上面2个程序后,可以进行hexo的安装了:
$ npm install -g hexo-cli

1.3 Hexo初始化

安装 Hexo 完成后,我们可以在本地新建一个文件夹如:builder34.github.io(这个目录是我们Github Pages博客项目的目录),假如我的文件夹路径为/home/test/builder34.github.io,建站初始化命令可以如下:

$ cd /home/test/builder34.github.io
$ hexo init ./
$ npm install

$ hexo generate

下面介绍几个常用的hexo命令(括号里面的命令为缩写形式,效果一样):
1. hexo generate(hexo g) #生成静态文件,会在当前目录下生成一个新的叫做public的文件夹
2. hexo new "postTitle" #新建博客文章
3. hexo new page "pageTitle" #新建1个页面
4. hexo server(hexo s) #启动本地web服务预览(加参数--debug,用于调试,如:hexo s --debug)
5. hexo deploy(hexo d) #部署播客到远端(比如Github,coding,heroku等平台)

在命令行中输入hexo s --debug后,运行成功后,可以在浏览器中输入:http://localhost:4000看到自己新建的博客了。

1.4 更改主题

一般我们初始化博客的文件夹后,文件结构大概如下:

$ ll
total 1352
-rw-r--r--    1 builder34  staff    32B  4 14 01:34 README.md
-rw-r--r--    1 builder34  staff   2.3K  6 25 10:40 _config.yml
-rw-r--r--    1 builder34  staff    32K  6 26 15:50 db.json
-rw-r--r--    1 builder34  staff   458K  6 26 15:56 debug.log
drwxr-xr-x  293 builder34  staff   9.2K  6 25 10:42 node_modules
-rw-r--r--    1 builder34  staff   110K  6 22 23:59 package-lock.json
-rw-r--r--    1 builder34  staff   564B  6 22 23:59 package.json
drwxr-xr-x   14 builder34  staff   448B  6 25 10:40 public
drwxr-xr-x    5 builder34  staff   160B  4 17 23:12 scaffolds
drwxr-xr-x    3 builder34  staff    96B  6 25 10:57 source
drwxr-xr-x    6 builder34  staff   192B  6 25 11:33 themes

themes文件夹是我们博客主题的存放地方,下面我推荐一个主题:BlueLake

$ cd themes/
$ git clone https://github.com/chaooo/hexo-theme-BlueLake.git ./BlueLake
$ npm install [email protected] --save
$ npm install hexo-renderer-stylus --save

(该主题更细致的配置,请登录上面这个github网址,阅读README.md进行定制化配置)

在Hexo配置文件($your_blog_path/_config.yml)中把主题设置修改为BlueLake。

theme: BlueLake

完成配置后,执行下面语句,重新打开http://localhost:4000 可以看到博客以一个新的主题展现了

$ hexo g
$ hexo s --debug

1.5 hexo部署到Github

配置$your_blog_path/_config.yml文件的Deployment:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/your_githubName/your_githubName.github.io.git

通过下面的命名进行博客静态页面的生成,以及部署到远端Github Pages

#删除静态文件,即 public 文件
$ hexo clean
#生成静态文件,即 public 文件
$ hexo generate
#部署到远程站点
$ hexo deploy
#也可以使用组合命令(替代上面2条命令):生成静态命令并部署到远程站点
$ hexo deploy -g
git提交部署错误
使用 hexo deploy 命名部署到github失败,报上面的错误时,安装下面的插件即可解决:
$ npm install hexo-deployer-git --save

至此,Hexo+Github Pages构建个人博客网站已经基本完成了。可以通过网页访问自己的博客地址如:https://builder34.github.io

2.设置博客自定义域名

进入自己博客的repository仓库,通过类似如下的页面进行设置:


进入Github Pages设置

进入了settings页面后,往下拉直到看到Github Pages模块:

设置Github Pages

所填的自定义域名是需要自己已经在万网上注册的了,并且如果勾选了 Enforce HTTPS 的话,你的域名是需要ssl证书的哟。

3.注意事项

3.1 上传README.md并防止被渲染成文章

#在博客根目录下,新建或编辑你的README.md文件
$ vim README.md
$ mv README.md ./sources
#修改_config.yml文件,设置不渲染的文件
$ vim _config.yml
skip_render: README.md

3.2 每次hexo deploy后Github Pages自定义域名会被重置的问题

需要在sources目录下新建CNAME文件(注意为全大写无后缀的文件哦),文件内容为你需要映射到的自定义域名:

$ vim CNAME
blog.monbuilder.top

$ mv CNAME ./sources

你可能感兴趣的:(Hexo+Github Page搭建个人博客)