搭建个人博客网站Github、Hexo与Next

过年回家前在公司的最后一天,说实话有点心不在焉了。整个2017也就这样恍然过去,很多事都来不及回想。在这最后的时间里,想起把自己使用Hexo搭建个人博客网站的流程整理成篇,前段时间为了这个也是找了好多资料,遇到不少坑,将它记录在这里就算是旧年里的最后一个节点,毕竟春节过后新的一年就要真正开始了。

温馨提示:由于本篇是后期整理的文章,一些在实际操作中遇到的错误可能会遗漏,但都是可以百度到的,当然,我也欢迎大家留言问题,以供完善记录。

效果展示:风恣的博客

目录

一、准备工作
二、搭建博客(远程与本地)
三、发布博客
四、更换主题
五、博客网站美化
六、在不同电脑管理hexo博客
七、遇到问题
八、其他方案

一、准备工作

1.了解Hexo

Hexo是高效的静态站点生成框架,她基于Node.js。 通过 Hexo 你可以轻松地使用 Markdown 编写文章,除了 Markdown 本身的语法之外,还可以使用 Hexo 提供的标签插件来快速的插入特定形式的内容,而且相对于其他框架,Hexo在速度上也有很大优势。

2.搭建Node.js环境

我们了解到Hexo基于Node.js的,那么我们搭建博客网站首先需要安装Node.js环境。 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,可以在非浏览器环境下,解释运行 JS 代码。
下载地址:http://nodejs.cn/download
测试安装:命令行使用node -v 、npm -v,查看显示版本号即成功。

3.安装Hexo博客框架工具

Hexo是一个建站工具,可以帮助我们快速生成基本的博客文件,安装它需要在控制台下使用如下命令:

npm install hexo-cli -g

若报错,请尝试在命令前加上sudo

4.安装Git版本工具

Git是目前世界上最流行的分布式版本控制系统,是的,没有之一。使用Git可以帮助我们把本地的网页和文章等内容提交到Gihub上,实现同步。
下载地址:https://git-scm.com/downloads
Windows系统需下载,Mac系统因为自带Git无需操作。
测试安装:git - -version,查看显示版本号即成功。

5.注册Github账号

gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub。这里用到Github,是因为我们需要通过Github得到自己的博客网站域名,而且需要使用gitHub同步我们个人博客的相关文件。
注册地址:https://github.com
注册流程:https://www.baidu.com,百度一下,你就知道啦。

注意:注册Github的时候一定要选择一个合适的名字,因为后来博客网站的域名也会用到这个名字。虽然Github用户名支持后期修改,但是还是会带来很多不必要的麻烦。github的使用在网上有很多教程,这里也就不再累述了。

二、开始搭建博客

1.开启GitHub Pages服务

搭建我们的个人博客需要一个唯一的域名,当然我们可以申请购买一个域名来使用,但是在不是太必要的情况下,我们也可以通过Github Pages获得一个免费使用的域名,这需要我们在Github上新建一个仓库,如下:

Create a new repository

这个过程和建立普通的仓库没什么区别,关键在于新仓库的名字,一定要是UserName+“github.io”的形式。这也是之前强调的要起一个好的用户名的原因。这样之后我们最后的博客网站的链接就会是:https://UserName.github.io的形式。
注意:固定新仓库的名字格式并非必须,只是这样操作生成的博客域名比较短小简洁,另起他名生成博客域名会很冗长。

点击Create Repository之后,随后选择Setting进入设置,找到Github Pages如下:

Github Pages

这里我们需要点击Choose a theme任意选择一个选择主题,然后界面会跳转到仓库,我们看到有两个文件如下:

屏幕快照 2018-02-07 下午2.45.24.png

此时若再查看setting,我们会看到开启GitHub Pages之后得到的域名如下:

image.png

现在,我们就可以使用https://UserName.github.io,访问自己的博客网站了,打开链接我们会看到默认主题的个人博客样式如下(虽然有点点丑,是吧):

image.png

2.创建本地博客站点

上述的步骤相当于我们使用Github page,创建了一个默认的博客页,并且得到了一个可外部访问的域名。但是这个博客页很Low。我们的目的是创建自己个性化的博客网站,所以我们使用Hexo在本地先创建一个本地博客站点,优化后再把它部署到github上。接下来我们使用控制台命令在本地一个合适的位置创建博客站点文件夹如下:

hexo init  myHexoBlog       //myHexoBlog是项目名

下面来测试本地博客站点,在本地博客根目录下使用控制台命令:

hexo g  //g是generetor的缩写,生成博客

hexo s  //s是server的缩写,启动服务

此时打开浏览器,输入 http://localhost:4000/,我们将会看到Hexo自带默认主题显示的博客样式如下(呃,是好看了那么一点点):

3.同步Github,允许公共访问

在本地我们已经搭建了博客,但是还只能自己本地访问。若要别人也能看到,那就需要我们将其同步部署到GitHub上了。还记得我们之前准备的Github仓库吗,这里就要用到了。
首先找到我们的博客仓库,并拷贝仓库地址:

然后修改本地博客目录的配置:
修改本地博客根目录下的_config.yml文件,修改deploy下的配置如下:


最后执行控制台命令:

npm install hexo-deployer-git —save //安装部署插件

hexo d //部署到github

现在,我们再次访问链接:https://userName.github.io,就会发现这里的界面和本地的一样了。如此一来我们搭建的个人博客网站就基本完成了。

三、发布博客

激动人心的时候到了,终于可以发布自己的第一篇博客了。来尝试一下以下的步骤:
在本地博客文件夹根目录输入:

hexo new "我个人博客的第一篇博客,哈哈哈..."

hexo g   //生成网页

hexo d  //部署到远端(github)

查看我们本地的博客文件夹,将会看到我们创建一个条新的博客文章:

image.png

现在打开我们的博客网站:http://UserName.github.io,会看到网页如下(显示可能会延时,不如先喝杯茶放松下吧):

这就是我们发布博客的方法啦,当然这里是为了演示,真正做的时候我们要找到_posts里的博客原文,先编辑内容,然后再部署到github上。

四、更换主题

现在我们已经看见个人博客的雏形了,但是现在的博客网页一点也不高大上。为了让它看起来更美观一些,我们可以为其更换主题(当然也可以自己在默认主题下自己编写美化博客界面,可是我还不太会前端,以后再突破吧)。这里以使用github上的next主题为例:

1.创建next文件夹

切换到本地博客根目录下,在主题文件thems下创建一个新文件夹next存放即将下载的next主题

mkdir themes/next  

2.下载主题Next

curl -s [https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest](https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest) | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

此步骤可参考:https://github.com/iissnan/hexo-theme-next

下载成之后我们会看到next的主题已经存在thems里了如下:

3.修改博客配置文件,更换主题配置

修改博客根目录(不是next主题)下的_config.yml文件,搜索theme字段,并将其值修改为next。

然后在控制台下输入如下命令:

hexo clean  //清理缓存

hexo g    //重新生成博客代码

hexo d   //部署到远端

再次打开我们的博客网站:https://UserName.github.io,将会看到更换主题后的博客网页如下:

屏幕快照 2018-02-07 下午3.50.50.png

五、博客网站美化

终于我们的博客也算像点样子了,如果你和我一样是个完美主义者,那我们来继续美化它吧。这需要我们对博客中的各种配置进行修改。

首先说明一下:在Hexo中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。

1.站点配置:

在本地的博客根目录下找到_config.yml,用编辑器打开,如下:

这里可以修改博客网站的标题、描述,语言等属性,上面更换主题也是在这个文件中修改的。大家可以在这里稍作设置。

2.主题设置

关于博客主题的配置这块本来想着自己写下呢,却发现官方文档更加详尽。大家可以参考Next文档来学习。
文档地址:http://theme-next.iissnan.com/getting-started.html
其他参考:
hexo的next主题个性化教程
打造个性超赞博客Hexo+Next+githubPages的超深度优化

3.更多主题选择

next只是众多Hexo主题的一种,还有很多优秀的主题可供我们选择,参考以上的更换及配置方法我们就可以进一步美化我们的个人博客网站了。
更多主题选择:https://github.com/hexojs/hexo/wiki/Themes

六、在不同电脑管理hexo博客

其实,这也是我在使用Hexo搭建博客遇到的一个问题,如果我们检查自己博客在Github上的文件就会发现,github仓库里的文件和我们本地博客站点的文件夹是不同的,确切来说是少了很多内容。如果我们想在不同的电脑上管理自己的博客,就必须有源文件存在远端供我们随时下载、然后修改后重新部署到远端。

我们要理解这样一个过程:hexo d是把本地博客源文件生成的静态网页文件同步到github上,实现部署。但是博客网站的源文件仍需要我们自己保存。这里主要有两种思路可以选择:

1.在github存放我们博客静态网页文件的仓库里另建分支brach,单独用于存放源文件。
2.将本地博客文件存放在码云上。

这些都是关于git的操作,所以这里不用细说了。单对于这两种方法来说,我更倾向于第二种。因为毕竟这些都是我们搭建个人博客的源文件,将来还要在网站上发表文章,很多数据都在这里。使用码云我们可以创建私有仓库,将这些源文件私有存放更好一些,而且源文件和静态博客网页文件分开存放也避免使用分支频繁切换。

七、遇到问题

1.修改了配置,网站没有变化

这种情况,大多因为修改后配置后我们直接部署,没有执行hexo clean。

2.代码无法高亮显示

在Hexo的next主题下,我们使用markDown编辑文章,如果代码无法高亮,这有可能是我们没有在标记语言后添加语言类型,我需要在添加代码片段的时候使用如下的样式:

类似其他语言用:java、python...

八、其他方案

还有一种搭建博客网站的方案是Jekyll,还没有细致研究呢,先记在这里为以后扩展思路。

终于写完了,祝新的一年越来越好,加油!- 2018-02-13

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

推荐阅读更多精彩内容