Hexo + Github Page 搭建技术博客教程系列(一) 之初步建站

庄小帅的博客

前言


充满硝烟的秋招征程结束了,最终还是选择去做技术。在寝室无所事事一个月后回到Lab依然是一颗浮躁的心,并不能平稳心态踏实学习,遂决定开始写博客。一方面通过写博客让自己踏实起来,毕竟以后技术之路还很长;另一方面“教是最好的学”,能够把自己会的东西写出来,本身就是对掌握知识的巩固,同时也方便自己以后查看。

废话不多说,这个博客系列主要介绍如何搭建自己的博客并进行一系列自定义美化,我前前后后花了4天时间来完成博客的搭建、域名的绑定、博客主题的自定义等。第一篇博客就介绍下如何通过 Hexo 和 Github Page 初步建站。Hexo 是一个快速、简洁的博客框架,可以帮助我们快速生成静态网页;Github Page 提供静态网页托管服务,相当于是服务器功能;再加上靓丽的主题美化博客外观,自己的博客就搭建完成啦。想要加快网站的解析速度的话,再给博客绑定个域名,美滋滋。

准备环境——安装 Node.js 和 Git


为了安装 Hexo,需要先安装下面 2 种应用程序:

  • Node.js (Hexo 是基于 Node.js 驱动的一款博客框架,建议使用 Node.js 10.0 及以上版本)
  • Git (分布式版本控制系统,用于博客项目的版本控制管理)

安装 Git

  • Windows: 官网下载并安装 git. (官网国内下载速度较慢,参考国内下载站)
  • Ubuntu: sudo apt-get install git-core
  • Max: 下载安装程序并安装。

安装 Node.js

  • Windows: 下载安装程序来安装。( 安装时勾选 Add to PATH )
  • Linux: 大部分 Linux 发行版都会在它们的默认软件包仓库中分发 Node.js

安装后打开命令行,输入相应命令验证是否安装成功,成功的话会有对应的版本号。

git version
node -v
hexo安装完成.png

安装 Hexo


这些都准备好后,就可以进行安装啦!打开Git Bash,输入:
$ npm install -g hexo-cli
安装完成后,就可以通过Hexo搭建博客了。执行下列命令:

hexo init myBlog
cd myBlog
npm install

新建完成后,在myBlog文件夹下会生成相应文件(夹):

├── _config.yml # 网站的配置信息,您可以在此配置大部分的参数。 
├── package.json
├── scaffolds # 模版文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
├── source  # 资源文件夹是存放用户资源的地方。
|   ├── _drafts # 博客草稿文件
|   └── _posts # 博客文章Markdowm文件 
└── themes  # 主题文件夹。 Hexo 会根据主题来生成静态页面。

由于文件夹内自带了”hello-world.md”,运行hexo s命令,在浏览器输入 http://localhost:4000/ 就可以预览博客的效果了(我这里修改了主题,看到的会有所不同)。

博客预览.png

至此,博客的本地部分就搭建完成了。接下来将博客部署到 Github Page。

部署到 Github Page


之前的步骤只是让我们能在本地电脑上看到自己的博客,为了让我们的博客让其他人也能看到,我们还需要做接下来的一些工作。

配置 SSH Key

首先在Github 新建一个 repository,repository 的名称必须是: 你的用户名.github.io

新建仓库.png

接着使用 Git 配置下 SSH Key。设置你的用户名和邮箱:

git config --global user.name "你的用户名"
git config --global user.email "你的Github邮箱地址"

生成密钥:
ssh-keygen -t rsa -C "你的Github邮箱地址"

查看密钥并复制:
cat ~/.ssh/id_rsa.pub

SSH Key.png

Github 添加 SSH Key

然后在 Github 上添加刚刚生成的 SSH Key。

打开 Github –> Settings –> SSH and GPG keys –> SSH keys –> New SSH key,复制之前生成的密钥粘贴就行了。

此时打开 Git,输入命令 ssh -T git@github.com 验证一下,如果出现 Hi XXX! You’ve successfully authenticated, but GitHub does not provide shell access. 说明 SSH key 添加成功了。如果出现问题,很有可能是之前的用户名、邮箱设置错误,检查一下。常见错误可以参考:
git-ssh 配置和使用
GitHub Help - Error Permission denied (publickey)

连接本地与 Github

至此,本地和 Github 的工作都已经完成,最后一步我们将它们两部分连接起来。
打开本地博客根目录下的 _config.yml 配置文件,找到 deploy 属性,填上自己的个人信息:

博客deploy配置.png

再安装一个部署插件:
npm install hexo-deployer-git --save

最后 hexo g -d 将本地博客部署上传,稍等片刻就可以在 https://你的用户名.github.io 看到博客了~

绑定域名(可选)


为了提高格(逼)调(格)和访问速度,可以将自己的博客指向一个域名。

购买域名

腾讯云阿里云都是可以的。一开始为了足够装逼,在腾讯云花了16RMB买了 .cn 的域名,然鹅后面发现 .cn 这种顶级域名需要备案,而腾讯云现在又不提供个人备案的授权号,最后无奈又去阿里云买了个 .top 的域名,只要6块钱以年,而且不用备案。购买域名之后,需要进行实名认证。

域名解析

实名认证之后就可以对自己的域名进行操作了。进入到域名解析设置中,添加如下两条记录:

dns解析.png
  • www 对应自己的博客 github 地址,即你的用户名.github.io
  • @对应 Github 的二级域名的 IP地址,即 185.199.109.153

接着在本地博客的 source 文件夹下新建文件,文件名为 CNAME ,无文件后缀名。打开该文件,在里面写上购买的域名,如我购买的 littledream.top

设置 Github Pages

打开 Github 中博客项目对应的 repository 的 Settings,注意是项目的设置,不是整个 Github 的设置。往下翻找到 Github Pages –> Custom domain 在里面填上购买的域名即可。

这样我们就完成了域名和我们博客的绑定。以我的博客为例,此时无论是输入 GuichenLv.github.io 还是输入 littledream.top 都可以跳转到我的博客。

下一篇博客我将接着介绍如何个性化博客的主题,添加头像、个性签名、访客数量统计、文章字数统计等等。

参考信息

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