使用hexo搭建个人博客教程

有图片版本教程请看https://www.fanis.cloud/2020/07/11/website-building-tutorial/

Hexo个人博客搭建教程

1 搭建前准备

1.1 环境配置

需要安装git、node最后安装hexo

1.1.1 安装Git

首先看电脑是否已经安装了git

git

若提示not founded则进行安装

#未安装homebrew则先安装homebrew/bin/bash -c $(curl -fsSL /Homebrew/install/master/install.sh)#安装gitbrew install git

查看git版本

git --version

显示如下则安装成功

fanziqimacbook-pro blog % git --versiongit version 2.21.0 (Apple Git-122)

1.1.2 安装node

点击访问 node官网 下载安装

查看node版本

git --version

1.1.3 安装并配置Hexo

安装hexo

sudo npm install -g hexo-cli

创建blog文件夹

# 此目录可以任意更改mkdir blog# 进入blog文件夹cd blog# init初始化hexohexo init开启本地服务# hexo s

若出现

INFO  Start processingINFO  Hexo is running at http://localhost:4000 . Press CtrlC to stop.

则在浏览器输入 http://localhost:4000 即可看到本地运行的博客首页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pGEqYZdy-1594451234162)(Hexo个人博客搭建教程/2.png)]

1.2 注册并创建仓库

这里讲解两个仓库

1.2.1 GitHub仓库

进入GitHub官网注册一个账号并记住用户名下一步要用到

新建一个仓库点击new repository

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zW9Ky9BL-1594451234165)(Hexo个人博客搭建教程/3.png)]

进入这一步仓库名字必须是用户名.github.io然后点击创建

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2S4AHY5S-1594451234167)(Hexo个人博客搭建教程/4.png)]

配置ssh key

cd .ssh

新建ssh key

ssh-keygen -t rsa -C 你的邮件地址

出现

Generating public/private rsa key pair.Enter file in which to save the key (/Users/fanziqi/.ssh/id_rsa): 

则输入ssh的名字比如GitHub然后回车

再连续按两次回车最终会生成一个文件在用户目录下打开用户目录找到.ssh刚刚起的名字.pub文件打开并复制里面的内容打开你的github主页进入个人设置 - SSH and GPG keys - New SSH key

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-er4TG7BT-1594451234168)(Hexo个人博客搭建教程/6.png)]

粘贴到key里面title任意点击保存。

测试是否成功

ssh -T gitgithub.com

提示 Are you sure you want to continue connecting (yes/no)?输入yes提示

You’ve successfully authenticated, but GitHub does not provide shell access.

则配置成功

1.2.2 Coding仓库

由于GitHub服务器在国外访问速度非常慢。所以建议使用国内的Coding

进入coding官网点击免费注册

注册成功后新建一个代码托管项目名称是用户名并勾选readme[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jE9h0Nxc-1594451234169)(Hexo个人博客搭建教程/5.png)]

进入代码仓库点击左下角项目设置–项目与成员–功能开关–打开持续部署

进入项目–持续部署–静态网站

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7wILmbmn-1594451234170)(Hexo个人博客搭建教程/7.png)]

填好名称后并保存

经测试coding使用ssh公钥无法上传代码则通过普通的输入用户名密码的方法上传。

1.3 关联到仓库

在创建的blog文件夹里找到_config.yml文件并打开在文档最后找到

deploy:  type: git  repo: 

将其修改为

deploy:  type: git  repo:github:gitgithub.com:你的GitHub账号/你的GitHub账号.github.io.gitcoding:/你的coding账号/你的coding账号/你的coding账号.git#gite.coding.net:fanis/fanis/fanis.git 此方法暂时不好用  branch: master

然后执行

#产生静态网页hexo g# 部署到GitHub/coding上hexo d#也可使用hexo g  hexo d

进入/即可看到hexo博客

1.4 绑定个人域名

如果想使用自己购买的域名进行访问则需要将个人域名cname解析到你的名字.github.io/或coding静态网站中的一串代码.coding-pages.com/上

1.4.1 域名配置

我的域名购买于阿里云别的域名注册商大同小异。

打开域名解析页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cjaCw22A-1594451234171)(Hexo个人博客搭建教程/8.png)]

天价一个CNAME类型的解析解析到coding或GitHub上

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qih2w2h9-1594451234172)(Hexo个人博客搭建教程/9.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kuPJSMvq-1594451234172)(Hexo个人博客搭建教程/10.png)]

然后在blog/source/文件夹下创建一个名为CNAME文件不要后缀。写上你的域名。

注意⚠️国内访问GitHub很慢如果想达到分流的效果在解析的时候GitHub解析线路选择境外coding选择境内即可实现国外用户访问GitHub而国内用户访问coding。

1.4.2 GitHub设置

登录GitHub进入之前创建的仓库点击settings设置Custom domain输入你的域名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hBZsMWQw-1594451234173)(Hexo个人博客搭建教程/11.png)]

1.4.3 coding设置

进入项目点击持续部署下的静态网站设置之前创建的静态网站下拉找到自定义域名绑定自己的域名并获取证书

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QDXYIQsK-1594451234174)(Hexo个人博客搭建教程/12.png)]

1.4.4 配置CNAME文件

在blog/source/中创建一个名为CNAME文件不要后缀。写上你的域名。

最后重新生成静态网站并上传就可以通过访问自己的域名来访问GitHub/coding上的blog了

hexo cleanhexo ghexo d

2 使用博客

2.1 基本配置

hexo最主要的配置是_config.yml这个文件详细可参考官方的配置描述。这里举几个常用的例子

# Sitetitle:  #网页标题author: #作者名字language: zh-CN #修改网页语言为英文

# URL## If your site is put in a subdirectory, set url as /child and root as /child/url: https://你的网站

2.2 更换主题

默认的主题很丑hexo官方主题页这里的主题都可以更换。我选的是butterfly主题界面美观功能强大。

2.2.1 安装主题

cd bloggit clone -b master /jerryc127/hexo-theme-butterfly.git themes/butterfly

应用主题

修改站點配置文件_config.yml把主題改為butterfly

theme: butterfly

安装pub渲染器

npm install hexo-renderer-pug hexo-renderer-stylus --save

2.2.2 配置主题

为了主題的平滑升級, Butterfly 使用了 data files 特性。

推薦把主題默認的配置文件_config.yml複製到 Hexo 工作目錄下的source/_data/butterfly.yml如果source/_data的目錄不存在那就創建一個。

打开source/_data/butterfly.yml

首先汉化导航栏更改将第一段代码更改为

menu:  首页: / || fas fa-home  时间轴: /archives/ || fas fa-archive  标签: /tags/ || fas fa-tags  分类: /categories/ || fas fa-folder-open  菜单||fas fa-list:- 音乐 || /music/ || fas fa-music- 电影 || /movies/ || fas fa-video  留言板: /messageboard/ || fa fa-paper-plane  友链: /link/ || fas fa-link  关于: /about/ || fas fa-heart

创建标签页

hexo new page tags

找到source/tags/index.md这个文件修改为

---title: 标签date: 2018-01-05 00:00:00type: tags---

创建分类页

hexo new page categories

找到source/categories/index.md这个文件修改为

---title: 分类date: 2018-01-05 00:00:00type: categories---

创建友情链接页

hexo new page link

找到source/link/index.md这个文件修改为

---title: 友情链接date: 2018-01-05 00:00:00type: link---

添加友情链接

在Hexo博客目錄中的source/_data創建一個文件link.yml

内容如下

class:  class_name: 友情链接  link_list:1:name: ZSTU #这里举一个例子link: /avatar: //avatar.pngdescr: 浙江理工大学官网#2:#name: xxxxxx#link: https://www.xxxxxxcn/#avatar: https://xxxxx/avatar.png#descr: xxxxxxx

注class_name和class_desc支持html格式書寫如不需要也可以留空。

音乐页使用插件hexo-tag-aplayer电影页使用插件hexo-douban请自行查看网页上的使用说明这里不再赘述。

404页面

# A simple 404 pageerror_404:  enable: true  subtitle: 頁面沒有找到  background:

代码

代码高亮主题

Butterfly 支持6種代碼高亮樣式

• default
• darker
• pale night
• light
• ocean
• mac

修改highlight_theme: light即可

default

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9bdHje8P-1594451234174)(Hexo个人博客搭建教程/13.png)]

darker[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8j5UDDKU-1594451234175)(Hexo个人博客搭建教程/14.png)]

pale night[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yvOB9xHl-1594451234176)(Hexo个人博客搭建教程/15.png)]

light[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WabXlMt8-1594451234176)(Hexo个人博客搭建教程/16.png)]

ocean[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MbUoUzTn-1594451234177)(Hexo个人博客搭建教程/17.png)]

mac[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3t8aU1tw-1594451234178)(Hexo个人博客搭建教程/18.png)]

代码复制功能

highlight_copy: true

代碼框展開/關閉

在默認情況下代碼框自動展開可設置是否所有代碼框都關閉狀態點擊可展開代碼

• true 全部代碼框不展開需點擊打開
• false 代碼狂展開有點擊按鈕
• none 不顯示按鈕

highlight_shrink: true #代碼框不展開需點擊  打開

社交图标

# social settings (社交圖標設置)# formal:#   icon: link || the descriptionsocial:  fab fa-github: /fanziqi614 || Github  fas fa-envelope: mailto:fzq614qq.com || Email

这会展示在主页头像下面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LwbaQx0t-1594451234178)(Hexo个人博客搭建教程/19.png)]

顶部图

# the banner image of home page 将路径填到这里index_img:# if the banner of page not setting,it will show the top_imgdefault_top_img: /2020/05/01/IuWi8QbHvzjlOPw.jpg

文档封面

修改position即可改变封面位置

cover:  # display the cover or not (是否顯示文章封面)  index_enable: true  aside_enable: true  archives_enable: true  # the position of cover in home page (封面顯示的位置)  # left/right/both  position: left  # When cover is not set, the default cover is displayed (當沒有設置cover時默認的封面顯示)  default_cover: #- /2020/05/01/gkihqEjXxJ5UZ1C.jpg

文章版权

post_copyright:  enable: true  decode: false  license: CC BY-NC-SA 4.0  license_url: /licenses/by-nc-sa/4.0/

打赏功能

在文末显示

在/blog/themes/butterfly/source/下创建wechat.jpg和alipay.jpg收款码图片

然后更改butterfly代码

# Sponsor/rewardreward:  enable: true  QR_code:- img: /img/wechat.jpglink:text: wechat- img: /img/alipay.jpglink:text: alipay

头像

在/blog/themes/butterfly/source/下创建avatar.png作为头像

vatar:  img: /img/avatar.png  effect: true # 頭像會一直轉圈

评论系统

我选择的是valine评论系统更加美观大方易于管理。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CPB3HmkM-1594451234179)(Hexo个人博客搭建教程/20.png)]

进入/注册账号实名认证验证邮箱创建应用

在设置中记下应用keys

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2NgqoySQ-1594451234180)(Hexo个人博客搭建教程/21.png)]

填到下面的对应位置并修改enable为true

# valine# valine:  enable: true # if you want use valine,please set this value is true  appId:  # leancloud application app id  appKey:  # leancloud application app key  pageSize: 10 # comment list page size  avatar: monsterid # gravatar style /#/avatar  lang: zh-CN # i18n: zh-CN/zh-TW/en/ja  placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )  guest_info: nick #valine comment header info (nick/mail/link)  recordIP: true # Record reviewer IP  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)  bg: # valine background  emojiCDN: # emoji CDN  enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar  requiredFields: nick # required fields (nick/mail)  count: true # dispaly comment count in top_img

注意⚠️guest_info:和requiredFields:一定要对应否则无法发送评论。

侧边栏设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mPhkXyyh-1594451234180)(Hexo个人博客搭建教程/22.png)]

可自行设置应用的开关

aside:  enable: true  mobile: true # 手機頁面 顯示寬度  768px 是否顯示aside內容  position: right # left or right  card_author:enable: truedescription:  card_announcement:enable: truecontent: This is my Blog  card_recent_post:enable: truelimit: 5 # if set 0 will show all  card_categories:enable: truelimit: 8 # if set 0 will show allexpand: none # none/true/false  card_tags:enable: truelimit: 40 # if set 0 will show allcolor: false  card_archives:enable: truetype: monthly # yearly or monthlyformat: MMMM YYYY # eg: YYYY年MM月order: -1 # Sort of order. 1, asc for ascending; -1, desc for descendinglimit: 8 # if set 0 will show all  card_webinfo: true

北京动画美化效果

# Background effects (背景特效)# # canvas_ribbon (靜止彩帶背景)# See: /hustcc/ribbon.jscanvas_ribbon:  enable: false  size: 150  alpha: 0.6  zIndex: -1  click_to_change: true  mobile: true# Dynamic ribbon (動態彩帶)canvas_ribbon_piao:  enable: true  mobile: false# canvas_nest# /hustcc/canvas-nest.jscanvas_nest:  enable: false  color: 0,0,255 #color of lines, default: 0,0,0; RGB values: (R,G,B).(note: use , to separate.)  opacity: 0.7 # the opacity of line (0~1), default: 0.5.  zIndex: -1 # z-index property of the background, default: -1.  count: 99 # the number of lines, default: 99.  mobile: false

2.3 创建新博客

在_config.yml配置文件中修改为 post_asset_folder: true 然后新建一篇文章

hexo new post 文件名

这个时候source下会出现一个.md文件和 同名文件夹

用typora等md编辑器即可编辑图片放在同名文件夹中。

打开md文件Front-matter 是檔案最上方以 — 分隔的區域用於指定個別檔案的變數。

---title:date:updated:tags:categories:keywords:description:top_img:commentscover:  toc:  toc_number:auto_open:copyright:mathjax:katex:aplayerhighlight_shrink---

参数用法[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GXZuKZru-1594451234181)(Hexo个人博客搭建教程/23.png)]

文章写在Front-matter下方

写好后

hexo g %% hexo d

即可在网站上看到

3 hexo常用命令

hexo n 我的博客  hexo new 我的博客 #新建⽂章hexo p  hexo publishhexo 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 #⾃定义 IPhexo clean #清除缓存 ⽹⻚正常情况下可以忽略此条命令hexo g #⽣成静态⽹⻚hexo d #开始部署hexo generate #使⽤ Hexo ⽣成静态⽂件快速⽽且简单hexo generate --watch #监视⽂件变动两个命令的作⽤是相同的hexo generate --deployhexo deploy --generatehexo new postName #新建⽂章hexo new page pageName #新建⻚⾯hexo generate #⽣成静态⻚⾯⾄public⽬录hexo server #开启预览访问端⼝默认端⼝4000ctrl  c关闭serverhexo deploy #将.deploy⽬录部署到GitHubhexo new [layout] titlehexo new photo My Galleryhexo new Hello World --lang tw

零、序

我们既然已经搭建好了我们的个人网站接下来就该做写有意思点的事情了比如给我们的个人网站换个主题

最开始 hexo init 的时候默认下载安装的主题是 landscape如下图所示

我们也不能说它 丑其实还看得过去毕竟是官方默认的姑且称之为 经典 吧。但是确实不是很好看好了下面开始正题。

一、官网选主题

官方网址如下https://hexo.io/themes/

从上图中我们可以看到截止至本篇博文发布之时官方总共提供了 231 个主题供大家选择。

如果要说有没有什么选择的原则应该是没有的吧关键是要自己看着喜欢最好是一见钟情的那种毕竟它将会作为你个人网站的的主题代表你个人的风格很可能成为别人对你的第一印象。

本人做为一个严重强迫症患者我硬是几乎把官网提供的 200 个主题全部点开看了一遍第一轮筛选出来 20 个第二轮 10 个第三轮 5 个所以我光是选个主题就花了几个小时非常不值得大家借鉴大家选的自己看着开心就好~

二、下载主题

纠结了几个小时之后终于在最后两三个中间强迫自己选了一个不排除后面会换如下图所示

从上图可以看出我选的主题是 matery。
点击图片可以直接进入该主题作者基于该主题已经开发好了的个人网站/blinkfox/hexo-theme-matery如下图所示

依此点击上图中的红色方框部分便可获得该主题仓库的下载链接至剪切板。

回到我们本地的 Hexo 仓库进入根目录下的 themes 目录下可以看到有一个名为 landscape 的文件夹如下图所示

这就是我们个人网站默认主题所在位置这里我们将这个文件夹删除在该目录下右击 Git Bash Here在 Git Bash 窗口中输入git clone /blinkfox/hexo-theme-matery.git这里的链接大家请替换成自己选中的主题的下载链接。

该主题下载完成后Git Bash 窗口中如下图所示

再看我们的 themes 目录下多了一个文件夹出来如下图所示

感兴趣的话可以点进去看一下里面就是该主题的源码如下图所示

至此我们已经获取到该主题的源码了。

三、更改主题配置

回到本地 Hexo 仓库的根目录下找到站点配置文件 _config.yml用 Notepad 或 记事本 等工具打开找到主题配置部分如下图所示

将上图中原来的主题名称 landscape直接改为我们刚刚下载下来的主题所在的文件夹名称 hexo-theme-matery这里其实也可以改为 matery但也必须将主题所在文件夹的名称也改为 matery保持一直即可。如下图所示

保存并退出。

四、本地查看

我们的更改完成之后可以先在本地查看一效果怎么样。回到 Hexo 仓库根目录下打开 Git Bash 窗口输入hexo server 启动服务器如下图所示

打开浏览器输入 localhost:4000 即可看见我们的主题已经更换了如下图所示

仔细看发现主页还会变色哈哈~
页面向下滚动效果如下图所示

选了主题我们的个人网站开始一步步变得有生命了起来~

五、部署到 GitHub 上

如果觉得新换的主题效果不满意那就继续挑选按照前面的步骤继续更换体验~ 如果觉得还算满意那就可以将它部署到 Github 上了其实是部署到 GitHub Pages一个意思。

5.1 生成静态网页

在 Git Bash 中输入hexo generate针对于我们所作的更改生成新的静态网页文件。如下图所示

5.2 部署到 GitHub 上

在 Git Bash 中输入hexo deploy将我们新生成的静态网页文件部署到 GitHub 上。如下图所示
这个过程在 Git Bash窗口中太长了就只分别放开头和结尾部分了

六、最后查看域名网页

在浏览器中打开自己的个人网站主页比如我的是oceanwang.top即可看到修改后的效果和前面在本地看到的一模一样

更换主题成功

这里就不放图啦~