程序员

Hexo+GithubPages 非常简单易行的搭建个人博客

2018-07-29  本文已影响290人  三口一个瓜
书写

前言

搭建博客难吗？

看完这篇你就知道有多简单 :P

搭建个人博客需要自己打代码吗？

想要美美哒，肯定是要一点的啊:disappointed_relieved:

但是说白咯，搭建博客和做程序一个道理：个人的时间和精力是有限的，一个程序往往都是使用了一堆别人的东西，来完成一个属于你自己的作品。没有人能够有那样的经历和智慧在建一座砖瓦房之前研究烧砖、搭瓦，建造，结构力学等等等等。

我们所需要完成的是站在巨人们的肩膀上看远一点，想深一点。

搭建我们的这样一个博客需要用到的主要配件：Hexo、Hexo 主题、Git、GithubPages、Gitment，这些都不需要自己去独立完成。而且这些都是免费的，除了买域名需要少许的钱。或者你执意要搭在自己的服务器上，当然这个从价格的计算上就不能一概而论了:（

总之搭建自己的博客无论从价格上，还是说耗费的时间和精力上都是微不足道的。毕竟，人家设计好的东西，我们只要直接拿来用就可以了。

概念简要介绍：

当然，搭建博客时你可以什么都不懂。但为了以后能更好的操作你的博客，建议在搭建成功之后，好好学习一下 Git 和 github 的使用。初步了解可以通过廖雪峰大大的博客。

为什么一个人需要写博客？？

这个问题建议你看看这篇文字：为什么你要写博客？。

虽然你可以什么都不懂，但以下3样东西你必须要有：

耐心：搭建博客是一件非常折腾的事情，所以耐心很重要
细心：一定要细心，确保每一步都是正确的。
一定的学习能力和钻研精神，遇到困难一定要面对它，主动解决。

搭建博客需要多长时间？

可能每个人都不太一样:smile:，这里我给出几个层次：

半天：只是搭建，不涉及到换域名和个性化，并且了解背景知识。那么只要半天便可以搭建完成
一天：需要了解背景知识，并且换了域名和主题，但没有太多的个性化
两天：设置评论，字数统计等
三天甚至更多：各种找个性化插件和设置，一直在折腾的人
当然，前两种都是你没有遇到太大的坑或者困难所给出的估计时间。这种就比较折腾了。我个人是不太推荐的:boom:，因为你实际上把太多精力放在倒腾博客页面而不是内容上了。始终要记得写博客才是重点呢~~~

搭建个人博客的步骤

给出我博客的地址吧~点击这里

一、GitHub创建个人仓库

登录到GitHub,如果没有GitHub帐号，使用某个邮箱注册一个 GitHub 帐号：点击个人页面中的 New repository 创建新仓库。

仓库的名字设定为：自己注册时的用户名 +.github.io
例如

我的用户名为：Bitnut
那么我的仓库名字就是：Bitnut.github.io

可见这个仓库是每个账号只能创建一个的特殊类型仓库

至此，你就已经相当于给自己的博客利用 github 的服务器搭了一个后台。很简单对不对~~

  1. 注册的邮箱一定要验证，否则不会成功；
  2. 仓库名字必须是：username.github.io，其中username是你的用户名；
  3. 仓库创建成功不会立即生效，需要过一段时间，大概10-30分钟，或者更久，我的等了半个小时才生效；

二、安装Git

为什么要安装它呢？因为在 win 下其他的类 Linux、Unix 的 git shell 可能会在用的时候出毛病，用 git 官方的能够避免这类问题。

从Git官网下载：

Git - Downloading Package--win
Git - Downloading Package--mac
Git - Downloading Package--linux

下载安装完成后，在命令行里输入 git -v 看看版本并测试是否安装成功.

若安装失败，参看其他详细的 Git 安装教程。

三、将你本地的 Git 与 GitHub 帐号绑定。

右键唤出 Git Bash。或者在菜单里搜索 Git Bash，设置 user.name 和user.email 配置信息：

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件：

为什么要配置这个呢？因为你提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。

cd ~/. ssh #检查本机已存在的ssh密钥

如果提示：No such file or directory 说明你是第一次使用git。

生成密匙：

ssh-keygen -t rsa -C "邮件地址"

然后连续3次回车，最终会生成一个文件在用户目录下

ls -a #直接查看所有文件
cat .ssh\id_rsa.pub #直接终端打开文件即可

复制里面的内容，打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key：


ssh-key

Title为标题，任意填即可，将刚刚复制的id_rsa.pub内容粘贴进去，最后点击Add SSH key。

测试是否成功添加公钥

在 Git Bash 中检测 GitHub 公钥设置是否成功，输入 ssh git@github.com

如果提示Are you sure you want to continue connecting (yes/no)?，输入yes，然后会看到：

Hi Bitnut! You've successfully authenticated, but GitHub does not provide shell access.

如上则说明成功。这里之所以设置GitHub密钥原因是，通过非对称加密的公钥与私钥来完成加密，公钥放置在GitHub上，私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户，所以每次推送都需要输入账号密码验证推送用户是否是合法用户，为了省去每次输入密码的步骤，采用了ssh，当你推送的时候，git就会匹配你的私钥跟GitHub上面的公钥是否是配对的，若是匹配就认为你是合法用户，则允许推送。这样可以保证每次的推送都是正确合法的。

安装Node.js

由于 Hexo 基于 Node.js 因此我们到官网上下载一下 node.js。

Node.js下载地址：Download | Node.js
下载安装包，安装Node.js会包含环境变量及npm的安装，安装后，检测Node.js是否安装成功，在命令行中输入 node -v 检测npm是否安装成功。

至此，安装Hexo的环境全部配置完成。:clap::clap:

安装Hexo

Hexo就是我们的个人博客网站的框架，这里需要自己在电脑常里创建一个文件夹。

注意不要在这个文件夹下面试用 Git 创建仓库，因为后面安装的主题内可能会带有 git 仓库，这样会导致包管理的混乱。

可以随意命名，这里命名为 Blog，Hexo 框架和以后我们自己发布的网页都在保存在这个本地文件夹中。创建好后，不需要进入文件夹中，在文件夹的父目录直接唤出 Git Bash。

使用npm命令安装Hexo，输入：

npm install -g hexo-cli

初始化我们的博客，输入：

hexo init Blog

注意，这里的命令都是作用在刚刚创建的Blog文件夹中。进入到文件夹中
查看一下我们的目录结构：

目录

为了检测我们的网站雏形，分别按顺序输入以下三条命令：

hexo new test_my_site #创建一篇新文章
hexo g #生成文件
hexo s #本地 server 部署

这样我们在本地成功部署了我们的博客
打开浏览器输入地址：

localhost:4000

厉害了小:fire:汁

常用的Hexo 命令

npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

命令简写

hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令

刚刚的三个命令依次是新建一篇博客文章、生成网页、在本地预览的操作。

把博客的更新部署到 Github 上

上面只是在本地预览，接下来要做的就是就是推送更新，也就是发布网站，让我们的网站可以被更多的人访问。在设置之前，

需要区分一下两个概念：

下一步将我们的Hexo与GitHub关联起来，打开站点的配置文件_config.yml，翻到最后修改为：

deploy:
type: git
repo: 这里填入你之前在GitHub上创建仓库的完整路径
branch: master

部署

保存站点配置文件。

以上的所有操作其实是在给 hexo d 这个命令做相应的配置，让 hexo 知道你要把 blog 部署在哪个位置，很显然，我们部署在我们GitHub的仓库里。最后安装Git部署插件，输入命令：

npm install hexo-deployer-git --save

完成后，我们分别输入三条命令：

hexo clean
hexo g
hexo d

第三条的 hexo d 就是部署网站命令，d是deploy的缩写。完成后，打开浏览器，在地址栏输入你的放置个人网站的仓库路径，即 http://xxxx.github.io 。其中的 xxxx 就是的GitHub用户名：

你就会发现你的博客已经上线了，可以在网络上被访问了。

更换主题！！！

默认主题:neutral_face:emmmm，不是很好看。所以我们进行到了至关重要的一步！要知道，帅。是一辈子的事情~~~颜值不够看，看ni:horse:呢对吧？

个人最欣赏的主题：hexo-theme-yilia
这个主题兼顾了颜值和效率，同时在手机端可以有非常好的体验，因此我选择了它。

当然你也可以选择其他主题。主题传送门：Themes 我自己使用的是 yilia 主题，可以在blog目录中的themes文件夹中查看你自己主题是什么。

首先下载这个主题：
在根目录唤出 Git Bash,

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

这是将 yilia 主题下载到 Blog 目录的 themes 主题下的 yilia 文件夹中。打开站点的_config.yml配置文件，将里面的 theme: landscape 改为 theme: yilia，然后重新执行 hexo g 来重新生成。

如果出现一些莫名其妙的问题，可以先执行 hexo clean ，可以清理 public 文件夹里面的内容。然后重新生成和发布即可。

初识Markdown语法

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。Markdown语法简洁明了、容易掌握，而且功能比纯文本更强，因此写博客使用它，可以让用户更加专注的写文章，而不需要费尽心力的考虑样式，相对于html已经算是轻量级语言，像有道云笔记也支持Markdown写作。并且Markdown完全兼容html，也就是可以在文章里直接插入html代码。比如给博文添加音乐，就可以直接把音乐的外链html代码插入文章中。具体语法参看：Markdown 语法说明(简体中文版) 可以说十分钟就可以入门。当然，工欲善其事必先利其器，选择一个好的Markdown编辑器也是非常重要的，这里推荐MarkPad 和The Markdown Editor for Windows ，这是带有预览效果的编辑器，也可以使用本地的文本编辑器，更多的Markdown的语法与编辑器自己可以搜索了解。

发布文章

我们开始正式发布上线博客文章，在命令行中输入：

hexo n "博客名字"

我们会发现在blog根目录下的source文件夹中的_post文件夹中多了一个 博客名字.md 文件，使用Markdown编辑器打开，就可以开始你的个人博客之旅了，Markdown常用的样式也就十来种，完全能够满足一般博文的样式要求，这是我的一篇博文内容示例：

通过带有预览样式的Markdown编辑器实时预览书写的博文样式，也可以通过命令 hexo s --debug 在本地浏览器的localhost:4000 预览博文效果。写好博文并且样式无误后，通过hexo g、hexo d 生成、部署网页。随后可以在浏览器中输入域名浏览。

倒腾主题

下面是我在倒腾 yilia 主题的时候遇到的一些坑

首先这个主题是国人写的，所以基本没有一些设置跟着主题里的配置文件的注释走就好。

但是一些小问题其实没有被直接在注释里面提到的，可能会给你造成一些麻烦，这里我列举一些。

设置打赏还有自己的头像

图片请保存在主题的 /source/img 下，但是在配置文件里面写的时候注意了，要写成 /img/zhifubao.jpg，具体原因主要还是涉及到地址的访问问题，因为每次访问默认都会到 /theme/source 下寻找，所以重复填写 /source 可能会导致图片加载不出来的小问题。

设置 favicon

收藏夹图标设置，这个可以到在线的网站上直接生成一个：favicon制作，然后在主题中设置 favicon 项即可。

aboutme想写长一点怎么办？

没问题，在你想换行的地方添加 <br> 就好。
以我自己的为例：

aboutme: 是个正在考研的选手<br>性别男，爱好女<br><br>热爱体育、美食、读书、旅游、美女等等<br><br>对金融很感兴趣<br>本科研究过区块链和网站开发。

微信分享那里会出现一些问题

好像本来主题里百度的二维码生成 api 没起作用呢。

现在很多大网站都有这样的一个功能，使用手机扫描一下网页上的二维码便可快速在手机上访问网站。在自己的博客里面想要实现这样的功能其实很简单，下面分享几个在线生成网址二维码的API接口。都是可以采用http协议接口，部分可以使用https协议，无需下载安装什么软件，可简单方便地引用，是最简单、最便捷的免费网址二维码生成工具。

  1. 百度网盘(可使用https)
    http://pan.baidu.com/share/qrcode?w=150&h=150&url=
  2. iClick接口 (无https)
    http://bshare.optimix.asia/barCode?site=weixin&url=
  3. JiaThis 接口(无https)
    http://s.jiathis.com/qrcode.php?url=
  4. 联图网(无https)
    http://qr.liantu.com/api.php?text=
  5. K780数据网(支持https和http)
    http://api.k780.com:88/?app=qr.get&data=
  6. QR Code Generator(https接口)
    https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=
  1. 打开 Chrome 或者其他浏览器，点击页面里的分享中的微信图标，邮件点击弹出窗口，点击检查元素或检查或者审查等等，看个人的浏览器版本。查找到对应的 HTML 中的代码行。
  2. 复制里面任何一段代码，用某个 IDE 或者编辑器(我自己使用的是 vscode)，利用代码查找功能查找到对应的代码。
  3. 把网站替换为以上的任意一个试试看。会有延迟，多刷新几次试试看。

完成

让博客网址使用全英文路径

上面的微信分享二维码功能完成之后，手机扫码出来却不能访问，为什么呢？？

原因在于你的文章可能使用了中文命名，而 hexo 默认使用了文章标题作为网址

解决方案：修改 permalink 变量

在博客根目录的配置文件（_config.yml）中这样修改：

permalink: :year/:month/:day/:title # 这是原配置
permalink: :year/:id/ # 替换为此新配置

并且在.\scaffolds\post.md中修改为：

title: {{ title }}
id: {{date}}
date: {{ date }}
tags:

这里我的 id 初始化的时候是日期，包含年月日时分秒。为了美观和便于识别，我在上传的时候会修改这个 id 使他保证和其他文章不冲突。

我的做法是使用创建日期中的月+日+时+分+秒来定义一个id，比如月日-时分秒 。

评论功能添加

大家可以去看看，我最后采用的是 Gitment,十分美观可用性强。
主要步骤有：

  1. 注册 OAuth Application 点击此处注册。其他内容可以随意填写，但要确保填入正确的 callback URL（一般是评论页面对应的域名，如 https://imsun.net）。通过这个步骤你会得到一个 client ID 和一个 client secret。

  2. 在配置文件里面填写相应的内容，下面的都填上~

    gitment_owner: 'Bitnut' #你的 GitHub ID
    gitment_repo: 'comment' #存储评论的 repo,注意是名字不是地址！
    client ID
    client secret

评论的其他的一些坑点我参考了这篇文章,有问题注意上去看看！

最后我给出我自己的配置文件

# Header

menu:
主页: /
随笔: /tags/随笔/
金融: /tags/金融/
计算机: /tags/计算机/
SCUT: /tags/SCUT/

# SubNav
subnav:
github: "https://github.com/Bitnut/Bitnut.github.io"
weibo: "https://weibo.com/u/5724174787/home"
rss: "#"
zhihu: "https://www.zhihu.com/people/lalalapc/activities"
#qq: "#"
#weixin: "#"
#jianshu: "#"
#douban: "#"
#segmentfault: "#"
#bilibili: "#"
#acfun: "#"
#mail: "mailto:litten225@qq.com"
#facebook: "#"
#google: "#"
#twitter: "#"
#linkedin: "#"

rss: /atom.xml

# 是否需要修改 root 路径
# 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: /

# Content

# 文章太长，截断按钮文字
excerpt_link: '继续'
# 文章卡片右下角常驻链接，不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: false

# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '感谢您的瓜！希望这篇文字能给你带来帮助~'
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay: '/img/zhifubao.jpg'
# 微信二维码图片地址
weixin: '/img/weixin.jpg'

# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 1
# 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录，不存在的…'

# 是否有快速回到顶部的按钮
top: true

# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: '/img/guage.png'

#你的头像url
avatar: '/img/gua.jpg'

#是否开启分享
share_jia: true

#评论：1、多说；2、网易云跟帖；3、畅言；4、Disqus；5、Gitment
#不需要使用某项，直接设置值为false，或注释掉
#具体请参考wiki：https://github.com/litten/hexo-theme-yilia/wiki/

#1、多说
duoshuo: false

#2、网易云跟帖
wangyiyun: false

#3、畅言
changyan_appid: false
changyan_conf: false

#4、Disqus 在hexo根目录的config里也有disqus_shortname字段，优先使用yilia的
disqus: false

#5、Gitment
gitment_owner: 'Bitnut'        #你的 GitHub ID
gitment_repo: 'comment'        #存储评论的 repo
gitment_oauth:
client_id: bu ke yi!!          #client ID
client_secret: bu ke yi!!      #client secret

# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
# 头像上面的背景颜色
header: '#4d4d4d'
# 右滑板块背景
slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider的设置
slider:
# 是否默认展开tags板块
showTags: false

# 智能菜单
# 如不需要，将该对应项置为false
# 比如
#smart_menu:
#  friends: false
smart_menu:
innerArchive: '所有文章'
friends: '友链'
aboutme: '关于我'

friends:
友情链接1: http://localhost:4000/
友情链接2: http://localhost:4000/
友情链接3: http://localhost:4000/
友情链接4: http://localhost:4000/
友情链接5: http://localhost:4000/
友情链接6: http://localhost:4000/

aboutme: 是个正在考研的选手<br>性别男，爱好女<br><br>热爱体育、美食、读书、旅游、美女等等<br><br>对金融很感兴趣<br>本科研究过区块链和网站开发。
上一篇下一篇

猜你喜欢

热点阅读