使用hexo搭建博客并上传GitHub

之前在博客园、简书、CSDN等地儿都开过博,一篇文章写好了,我希望能在几个平台可以同步发布,可是操作起来成本不低。几个平台下的富文本编辑器比较起来还是博客园更顺手,看着更舒服,尤其是代码块的操作灵活、准确。而CSDN对代码块内的文字加粗、修改字色后就会出现html文无法解析的情况,混杂着代码和html文本实在太难看了,后来我知道原来是Markdown的代码块规则限制。而且CSDN刚刚才取消了提交文章要审核通过才能发布的限制,审核没有完成之前,连自己都看不到,且不能修改,这让我一度放弃CSDN平台。如果是写普通的文章写作体验最好的是简书,大气、简洁。但简书更适合一般的写作,比较技术化的中间掺杂大量代码的支持还不够好。

作为一名程序员,应该到GitHub上开博,这里是程序员的圣城。花了两天时间研究了一下,发现还蛮简单的,而且md格式也被博客园、简书、CSDN所支持,写完一份应该比较容易复制到这三个平台。我喜欢在本地编辑markdown文件,使用sublime 及其插件Markdown Editing 和 OmniMarkupPreviewer。完成后底稿、资源文件都悉数保存到GitHub,日后查找、修改都很容易。

我用hexo作为静态页面生成器,操作过程遇到不少问题,搞定之后留一份操作记录吧。以后就把[http://palanceli.github.io/blog/]作为我的首发平台了;)

安装环境

  • 安装node.js,去官网下载安装即可,我安装的是最新稳定版。

  • 安装Hexo
    sudo npm install -g hexo

  • 创建hexo目录并初始化

$ mkdir hexo
$ cd hexo
$ hexo init
  • 然后就可以生成网站,启动服务了:
$ hexo clean
$ hexo generate
$ hexo server
  • hexo文件夹
    先来看一下hexo文件夹下的内容:
hexo/
  |- node_modules/  # hexo需要的模块,不需要上传GitHub
  |- themes/        # 主题文件,需要上传GitHub的dev分支
  |- sources/       # 博文md文件,需要上传GitHub的dev分支
  |- public/        # 生成的静态页面,由hexo deploy自动上传到gh-page分支
  |- package.json   # 记录hexo需要的包信息,不需要上传GitHub
  |- _config.yml    # 全局配置文件,需要上传GitHub的dev分支
  |- .gitignore     # hexo生成默认的.gitignore,它已经配置好了不需要上传的hexo文件

关联GitHub

首次先创建GitHub工程blog,并且使用“Launch automatic page generator”生成页面,它会给该工程创建分支gh-pages。
手动为之创建dev分支,未来工程源码会放到dev分支下;hexo生成的网站静态页面会放到gh-pages分支。

  • 首次创建GitHub工程后操作dev分支代码

如果是刚创建的GitHub工程,clone dev分支的代码到本地blog-dev/,然后把前面hexo/文件夹下的内容全部拷贝到blog-dev/,注意包括一个隐藏文件.gitignore。

  • 已存在GitHub工程的恢复
    仍是clone dev分支的代码到本地blog-dev/,然后把hexo/node_modules/拷贝到blog-dev/
    再试试生成页面、启动服务,确保是正常的:
$ hexo clean
$ hexo generate
$ hexo server

网上有介绍把package.json文件同步到GitHub,以后每次恢复时执行

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

可是我在不同的机器上试总是出错。只好采取笨办法,每次先hexo init出一个完整文件夹,再把相关文件拷贝到GitHub目录下。千万不要先clone 了blog目录,再在该目录下执行hexo init,因为init会把.git信息删掉。

配置自己的_config.yml

按照如下内容修改blog-dev/_config.yml:

title: Palance's Blog   # 标题
subtitle:
description:
author: Palance Li
language: zh-CN         # 语言设置
url: http://palanceli.github.io/blog
root: /blog/

翻到最下面,改成:

deploy:
  type: git
  repository: https://github.com/<自己的github账号>/blog.git
  branch: gh-pages

主题

这里有大量的主题https://github.com/hexojs/hexo/wiki/Themes
我非常喜欢Maupassant:https://www.haomwei.com/technology/maupassant-hexo.html
简洁清晰,而且适配手机、PC各个平台。

  • 安装方法
    首次在blog-dev/目录下执行如下命令
$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
$ npm install hexo-renderer-jade --save
$ npm install hexo-renderer-sass --save

以后建议把blog-dev/themes/maupassant/.git文件夹删掉,把maupassant文件夹随自己的blog-dev上传到GitHub。
以后clone blog-dev后,执行完前面的安装操作步骤后记得执行

$ npm install hexo-renderer-jade --save
$ npm install hexo-renderer-sass --save
  • 配置
    在blog-dev/themes/maupassant/_config.yml中根据自己的情况修改,比如:
links:
  - title: 我的博客园
    url: http://www.cnblogs.com/palance/
  - title: 我的CSDN
    url: http://blog.csdn.net/zchongr
  - title: 我的简书
    url: http://www.jianshu.com/users/5e527164a8c2

在blog-dev/_config.yml中修改:

theme: maupassant

第一次的工作就完成了,可以提交github到blog-dev了。

上传生成页面

执行

$ cd blog-dev
$ npm install hexo-deployer-git

以后每次执行完

$ hexo clean
$ hexo generate
$ hexo server

生成了静态页面后就可以执行

hexo deploy

完成页面上传。

其它

图片

首先确认_config.yml中有:

post_asset_folder: true

然后在blog-dev/下执行

npm install https://github.com/CodeFalling/hexo-asset-image --save

确保在blog-dev/source/_posts下创建和md文件同名的目录,在里面放该md需要的图片,然后在md中插入

![](目录名/文件名.png)

即可在hexo generate时正确生成插入图片。比如:

_posts
    |- post1.md
    |_ post1
        |- pic1.png

在md文件中插入图片时只需写

![](post1/pic1.png)

即可。首次配置完了需要执行一次清除操作,再生成页面:

$ hexo clean
$ hexo generate
$ hexo server

如果没做清除,直接生成页面,在我这里会出现路径错误的情况。

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

推荐阅读更多精彩内容