hexo+GitHub博客搭建实战

一.准备工作

1、安装 Node.js: https://nodejs.org/en/

2、安装 Git: https://github.com/waylau/git-for-win

Git教程 https://github.com/waylau/git-for-win廖雪峰老师的教程,非常好。

3、安装完成后,在开始菜单里找到“Git”->“Git Bash”,名称和邮箱是Github上的。

git_1.png

4、安装 Hexo。所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

4.1 安装hexo出错:

unable to verify the first certificate(无法验证第一证书)
hexo_1.png

查找到解决方案:

hexo_2.png

参考网址:npm报错

依据解决方案所述,在命令行输入如下命令,来取消ssl验证:

npm config set strict-ssl false

之后安装就会成功了,显示如下:

hexo_3.png

二、配置Github

首先注册、登录 https://github.com/

记住自己的Username(很重要)

然后右上角选择 Create a new repository https://github.com/new

Repository name(填自己的名字) yourname.github.io(yourname与你的注册用户名一致,这个就是你博客的域名了)

github_1.png

仓库创建完成后,开始生成添加秘钥。

在终端(cmd)输入:

ssh-keygen -t rsa -C "Github的注册邮箱地址"

一路Enter过来就好,待秘钥生成完毕,会得到两个文件id_rsaid_rsa.pub,用带格式的记事本打开id_rsa.pubCtrl + a复制里面的所有内容,然后进入https://github.com/settings/ssh

github_2.png

将复制的内容粘贴到Key的输入框,随便写好Title里面的内容,点击Add SSH key按钮即可。

若没有配置GitHub,就执行第三步(初始化博客),会出现如下错误:

hexo_4.png

三、初始化博客

在电脑F盘(自己随意)目录下新建文件夹 test,进入test,按住Shift键点击鼠标右键,点击“在此处打开命令窗口”:

blog_1.png

输入

hexo init blog

稍微等待下,速度有点慢。成功提示:

INFO  Start blogging with Hexo!

因为你初始化hexo 之后source目录下自带一篇hello world文章, 所以直接执行下方命令:

$ hexo generate
# 启动本地服务器
$ hexo server
# 在浏览器输入 http://localhost:4000/就可以看见网页和模板了
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

访问http://localhost:4000/,便可以看到网站初步的模样,不要激动,我们还要把网页发布到Github上去。

blog_local_server.png

四、配置博客

blog目录下,用sublime/notepad++等文本编辑器打开_config.yml文件,修改参数信息

特别提醒,在每个参数的:后都要加一个空格

1.修改网站相关信息

title: wangwlj测试所用博客
subtitle: 积跬步以至千里!
description: 网页描述
author: wangwlj
language: zh-Hans
timezone: Asia/Shanghai

languagetimezone都是有输入规范的,详细可参考 语言规范时区规范

2.配置部署(qwerty200696,修改成自己的)

deploy:
  type: git
  repo: https://github.com/qwerty200696/qwerty200696.github.io
  branch: master

其中repo项是之前Github上创建好的仓库的地址,可以通过如下图所示的方式得到:

github_3.png

branch是项目的分支,我们默认用主分支master

3.配置统一资源定位符(个人域名)

如果有个人域名的话可以设置,否则跳过即可。GitHub地址也可以。

url: http://inerdstack.com

对于root(根目录)、permalink(永久链接)、permalink_defaults(默认永久链接)等其他信息保持默认。

五、发表文章

1.新建一篇博文,在CMD中输入

$ hexo new "我的测试文章"

INFO  Created: F:\test\blog\source\_posts\我的测试文章.md

2.找到该文章,打开,使用Markdown语法,该语法介绍可以查看:markdown语法

3.接着输入如下的一系列命令:

F:\test\blog
$ hexo clean
INFO  Deleted database.
INFO  Deleted public folder.

F:\test\blog
$ hexo generate
INFO  Start processing
INFO  Files loaded in 1.48 s
#省略
INFO  29 files generated in 4.27 s

$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

我直接跑的server,也可以。

最后一步,发布到网上,执行:

F:\test\blog
$ hexo deploy
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
#省略

其中会跳出Github登录,直接登录,如果没有问题,在浏览器输入qwerty200696(换成你的).github.io/

然后就可以看到已经发布了。

4.错误记录一:

 deploy not found: git
error_1.png

解决方案:执行如下语句后, 再部署即可:

npm install hexo-deployer-git --save

参考自:https://www.v2ex.com/t/175940

error_1_done.png

5.错误记录二:

今天运行:

hexo deploy

同步文章到github时,出错:

fatal: unable to access 'https://username:password@github.com/username/username.github.io.git/': SSL certificate problem: unable to get local issuer certificate
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: fatal: unable to access 'https://username:password@github.com/username/username.github.io.git/': SSL certificate problem: unable to get local issuer certificate

    at ChildProcess.<anonymous> (D:\test\blog2\node_modules\hexo-util\lib\spawn.js:37:17)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at ChildProcess.cp.emit (D:\test\blog2\node_modules\cross-spawn\lib\enoent.js:40:29)
    at maybeClose (internal/child_process.js:920:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:230:5)
git_hexo_deploy_error.png

解决方法:执行如下语句:

$ git config --global http.sslVerify false

参考自:git获取代码提示SSL certificate problem: unable to get local issuer certificate

(optional)另外,可将_config.yml中的repo修改为如下标准格式:

repo: https://用户名:密码@github.com/用户名/用户名.github.io.git

参考自: hexo提交报错 unable to access

之后再次运行发布指令,终于成功:

hexo deploy
git_hexo_deploy_error_done.png

六、添加图片

经过上面的配置后,发现上传的博客文章里面的本地图片居然显示不来(没有同步上传)。

于是,找到解决方案:

1 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true

2 在你的hexo目录下执行这样一句话npm install hexo-asset-image --save,这是下载安装一个可以上传本地图片的插件

3 等待一小段时间后,再运行hexo n "xxxx"来生成md博文时,/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹

4 最后在xxxx.md中想引入图片时,先把图片复制到xxxx这个文件夹中,然后只需要在xxxx.md中按照markdown的格式引入图片:

![](xxxx/图片名.jpg)

注意: xxxx是这个md文件的名字,也是同名文件夹的名字。只需要有文件夹名字即可,不需要有什么绝对路径。你想引入的图片就只需要放入xxxx这个文件夹内就好了,很像引用相对路径。

5 最后检查一下,hexo g生成页面后,进入public\2017\02\26\index.html文件中查看相关字段,可以发现,html标签内的语句是![](2017/02/26/xxxx/图片名.jpg),而不是<img src="xxxx/图片名.jpg>。(这点可以跳过,按照1-4步执行下来一般没有问题。)

6.hexo s,运行本地服务器,打开http://localhost:4000/,可实时查看修改情况。

7.hexo g,同步到github。

七、总结

发布文章的步骤:

1、hexo new 创建文章

2、Markdown语法编辑文章

3、部署(所有打开CMD都是在blog目录下)

hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo generate #生成
hexo server #启动服务预览,非必要,可本地浏览网页
hexo deploy #部署发布

简写Tips:

  1. hexo n “我的博客” == hexo new “我的博客” #新建文章

  2. hexo p == hexo publish

  3. hexo g == hexo generate#生成

  4. hexo s == hexo server #启动服务预览

  5. hexo d == hexo deploy#部署

参考文献:

  1. 教你免费搭建个人博客,Hexo&Github
  2. hexo生成博文插入图片

本文在GitHub博客上即时更新 https://qwerty200696.github.io/2017/09/08/blog_setup/

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

推荐阅读更多精彩内容