Hexo+Github搭建个人博客(小白篇)


最近想要开始写博客了,一来可以梳理一下当天所学的东西,二来到以后求职和升学都有用,另外,还可以记录和分享一些生活中的趣事。

于是,就在网上找了一圈,发现很多博客都不怎么漂亮,那不如自己搭建一个,google了一下,果然有框架可以用来快速搭建。

顺便就记录搭建过程作为小白教程,正好搭建好以后还能充充数。


1.需要具备哪些条件?

1.无需技术基础
2.不需要花钱,除非你想要买个性域名(20+刀两年)
3.几个小时的时间(想要优化配置需要另外的时间)
4.博主是用windows系统的,用其他系统的小伙伴也不必担心,只有第一步的安装稍有不同,而且用linux系统和mac os的同学下载安装更简单,用命令行就可以搞定了。

2.搭建全过程

2.1下载安装Git、Node.js和Hexo

小白们不要被这几个英文字母吓到,搭建这个博客你不必深入理解这些,只需要跟着博文做下去就可以了。

2.1.1下载安装Git

Git是一个分布式的版本控制工具,也是目前最流行的。它可以帮助你管理本地仓库,并且把本地的项目托管到远端的Github上。也就是你需要建立一个仓库来放你的博客网站项目,并部署到Github。
这里推荐廖雪峰的Git教程,不需要看完,只需要看安装的部分,几分钟就搞定。如果觉得这个教程还不清楚,任何问题都可以Google或者百度。

2.1.2下载安装Node.js

后文的npm开头的命令都需要依赖Node.js。直接到Node.js的官方网站下载安装,看到最大的那两个绿色按钮,下载v6的就行。下载下来以后一路next下一步就可以了。

2.1.3下载安装Hexo

hexo是一个强大又方便的静态博客框架,有了它就相当于有了一个博客的架子,只需要往里面填东西和修改一些配置就可以搭建好一个博客了。这里就要用到前面安装好的Git Bash,如果你跟博主一样安装的是Git Shell,也没有任何问题,效果都是一样的。

2.1.3.1打开你的Git Bash或者Git Shell

一般安装好Git Bash以后,右键任何地方,都会
看到Bash和GUI(图形界面)。博主的Shell直接放在桌面。

右键菜单

打开是默认进入到Git的根目录下的,用Bash的同学应该看到的是$符号开头。

2.1.3.2依次执行以下指令:

1、安装hexo

npm install hexo-cli -g

2、安装hexo-deployer-git(从名字看也知道它是用来把博客部署到git上的)

npm install hexo-deployer-git --save

缺少第二步,在后面的步骤会出现以下错误信息:

ERROR Deployer not found : github

到这里所有需要下载安装的都安装完了。

2.2用hexo在本地搭建博客

2.2.1初步搭建

1.创建放置博客文件的文件夹,可以任意路径(不建议中文路径,以免碰到不必要的错误)任意命名,建议直接创建在Git的根目录下。然后用cd命令进入该文件夹。

cd 你的文件夹名字

对于文件夹放在其他地方的同学

cd 你文件夹所在路径
进入文件夹

注:再次说明一下,博主用的是shell,所以跟用bash的同学看到的不同,你们看到的应该是$符号开头的

2.在该文件夹下执行以下命令,Hexo会自动下载并初始化搭建博客所需的所有文件。

hexo init
正在下载并初始化

看到以下信息,说明你的博客已经初步搭建好了。

INFO  Start blogging with Hexo!

3.安装依赖包

npm install
安装依赖包成功

其实只要没有看到ERROR字样就成功了,之后的命令也是。

2.2.2验收一下初步搭建的成果

同样是在Blog文件夹下,执行以下命令:
1.生成静态文件

hexo g

2.启动服务器,进行本地预览(也就是只有本机能够访问博客)

hexo s

成功启动服务器

我们看到最后一句话,说明hexo已经运行在本地端口4000了,我们可以用浏览器访问这个地址进行预览。
你搭建的一个博客雏形已经出现了。
博客预览

注:以后配置博客主题时,也会频繁使用到这两个命令进行预览,满意后再部署到Github

2.3将本地的博客部署到GitHub

2.3.1在Github创建仓库

1.注册、登录不用我说了。牢记用户名、邮箱和密码,以后都会要用到。
2.创建新的仓库


创建仓库按钮

只需要填写仓库名,这个名字的格式必须为username.github.io,如下图,username必须为你Github的用户名,也就是用来登录的那个。


设置仓库名

这里是因为我之前创建过了这个仓库,所以提示错误信息,可以忽略。
3.第一次使用Github的同学需要配置SSH key,具体SSH key是什么,有兴趣的同学可以Google或者百度,我们这里配置的原因是为了以后部署博客到Github不用再输入密码,你可以简单理解为你的主机获得了进入Github的钥匙。

点击右上角自己的头像,选择设置选项。


setting

点击左侧的SSH and GPG keys,然后点击右上角New SSH key,如图:


创建SSH key

这里的title可以任意命名,建议可以命名为“主机+系统”以便以后唤醒你的记忆。知道当初配置它是给哪台主机的哪个系统的。
Key值需要生成,通过在Git Bash或者Git Shell执行以下代码:
ssh-keygen -t rsa -C "你Github上绑定的邮箱"
生成密匙对

如图,因为我已经在这个默认路径下生成过了,也不想覆盖。
你们看到的应该是这样:

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again: 

依次询问了保存密匙对的路径、密码、密码缺少,博主的做法是全部回车,保存在括号里的默认路径,不设密码。你也可以这样做或者改路径、设密码。

Your identification has been saved in /Users/your_user_directory/.ssh/id_rsa.
Your public key has been saved in /Users/your_user_directory/.ssh/id_rsa.pub.

看到以上字样说明生成密匙对成功,一个私钥,一个公钥。沿着第二个路径找到公钥,用文本编辑器打开,复制里面的key值到之前看到的Github创建SSH key需要填的文本框中。点击创建即可。
4.在Bash或Shell中执行以下命令验证是否成功

ssh -T git@github.com

如果是第一次的会提示是否continue,输入yes就会看到:You’ve successfully authenticated, but GitHub does not provide shell access ,这就表示已成功连上github。

2.3.2配置站点文件,部署博客到Github

1.先设置全局的username和email,因为Github每次commit都会记录他们。

git config --global user.name "你的名字"  
git config --global user.email "你的邮箱"

2.编辑你的博客文件夹下的的_config.yml配置文件,建议使用Notepad++或者Sublime。在配置文件底部,配置如下信息。

deploy: 
  type: git
  repository: http://github.com/{github_username}/{github_username}.github.io.git
  branch: master

注:配置文件中的冒号后必须有一个空格,且这个冒号不能是中文冒号,不然会报错。

_config.yml文件底部

3.执行以下命令完成部署。分别是生成静态文件、部署到Github。

 hexo g
 hexo d

4.登录Github查看仓库username.github.io、访问username.github.io,看一下是否部署成功。

username.github.io仓库
username.github.io仓库内容

可以看到我们的本地文件以及发布到Github了。

username.github.io

我们通过用浏览器访问username.github.io也同样访问到了博客,注意,这里已经不是本地访问了。我们的博客成功发布了!快用小伙伴的电脑看一看吧。

2.4尝试发表一篇文章

hexo写文章是用Markdown的。Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。不用担心,这东西几分钟就学会了,我们来看一看例子。
你可以用Notepad++打开Blog\source_post路径下的hello-world.md文件,看看这个实例,对比一下浏览器打开的网站里的这篇博客示例,大概就懂怎么回事了。更多的语法可以Google或者百度。这里推荐一篇简单易懂的教程。简书写文章也可以设置成用Markdown编辑,所以简书也是一个不错的Markdown编辑器,以后写文章,可以先在简书里编辑,设置成双屏模式还可以预览效果,很方便。

用以下命令发表一篇新的文章:

hexo new "文件名"

这个文件名建议命名为你的博客标题。
执行这个命令成功后,会在Blog\source_post路径下生成一个新的文件,用编辑器打开这个文件进行Markdown语法的编辑就可以了。

写完文章后,你可以使用 hexo g生成静态文件。 hexo s在本地预览效果。hexo d同步到github,然后使用http://username.github.io进行访问。

注:每篇文章都是全文显示的,文章过长不方便阅读,可以在编辑文章时,使用< !-- more -->将文章摘要分割出来(把<和!之间的空格去掉,这里方便显示出来才添加了空格),文章中有< !-- more -->就会只显示< !-- more -->之前的摘要部分,并且显示【阅读全文】按钮。

3.需要注意的几个坑

1.ERROR Deployer not found : github
需要在Bash或Shell执行以下语句

npm install hexo-deployer-git --save

2.Hexo的配置文件中任何冒号后面都必须是带一个空格的
3.hexo clean
清除缓存文件db.json和已生成的静态文件public
在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。

hexo clean

4.创建仓库的命名
一定要按照上文所提到的格式,且必须使用用户名。
5.文件夹路径中有中文
这个不用多说了,路径中有中文总是会出现一些乱七八糟的错误。

4.总结一下常用的Hexo指令

hexo g #完整命令为hexo generate,用于生成静态文件
hexo s #完整命令为hexo server,用于启动服务器,主要用来本地预览
hexo d #完整命令为hexo deploy,用于将本地文件发布到github上
hexo n #完整命令为hexo new,用于新建一篇文章

5.关于域名绑定和主题切换

[Hexo个人博客]域名绑定 简明教程(小白篇)
[Hexo个人博客] 简述主题切换及其注意事项

6.参考

使用Hexo搭建个人博客(基于hexo3.0)
献给写作者的 Markdown 新手指南
廖雪峰的Git教程

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

推荐阅读更多精彩内容