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 "you@example.com"
$ 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://Builder34@github.com':

1.2 Hexo安装

安装 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 hexo-renderer-jade@0.3.0 --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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,875评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,569评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,475评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,459评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,537评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,563评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,580评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,326评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,773评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,086评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,252评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,921评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,566评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,190评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,435评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,129评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,125评论 2 352

推荐阅读更多精彩内容