Hexo博客搭建教程

2024-02-12 08:50:46

前言

本来不想这么折腾的，但是之前租的阿里云学生服务器要到期了，还不能以学生价续费，于是想换个云服务器续命，但学生服务器各个平台都差不多。

学生服务器的优点就是价格便宜，还能折腾，缺点也很明显，带宽低，搭建博客的访问速度慢，虽然也能用OSS，图床，CDN等改善访问速度慢的问题。

因为我是用markdown语法来做笔记的，之前使用的wordpress不是特别好用和支持，同时又嫌弃访问速度慢，所以原来的博客更新的比较少，后面直接跑去CSDN上更新了。

后来打算使用Python的Flask框架和Layui框架，寄几搭建个博客的，了解WSGI，Jinjia2，BluePrint等，想想还是太麻烦了（懒）。。。

秉承互联网的开源精神，有*的绝不造*，又看到了其他大佬们精美的博客，最后，敲定了使用hexo来搭建博客。

部署Hexo静态博客

静态博客介绍

静态博客，即通过生成工具（eg：Hexo；Hugo等），直接将作者所书写的博文编译成最终的 html；css；js 等静态文件。作者/博主，只需将生成的文件部署在静态 server 上面即可被在互联网中访问。用户通过浏览器访问服务器，直接就回获得已编译的静态资源。

优点：

速度极快，因为当用户访问博客时，只用从服务器（如nginx）调取编译好的静态资源即可，无需实时从数据库查询获取博文、图片、评论、访问量等资源，效率极高，打开网站的速度会非常快速！
作者可以专心生产博文，不用管服务器维护等琐事，基本不需要维护，折腾党除外。
成本低，市面上有很多开源免费的托管程序（如 gayhub；gitee；coding 等），不用担心高昂的服务器费用。
很安全，无需担心数据库注入，跨站攻击等网站安全问题。
你来补充。

缺点：

硬伤，无法支持原生评论，访问量统计，注册登录等功能。
操作繁琐，虽然前面提到静态博客不用管理服务器维护；不用担心高昂的服务器费用，但是没有后台管理的它，靠手动编译，如果在原基础上改动过多（美化；增删功能），将难以维护！！！
上手难，由于无后台管理功能，那么静态博客对新手菜鸟来说真的是难以使用，不懂 HTML、JS、CSS 根本不用谈使用了，因为你连发布文章都会非常吃力，所以想玩好静态博客，不经历点摸爬滚打，是不可能的。不要跟我说简单，因为你的简单只建立在原生无改动的情况下。
生成速度（编译速度），不同的静态博客生成器的速度各不相同，一旦静态资源存在大量图片，速度就会有明显的变化，当然对于坚定静态博客的人，这点忽略不计。

Hexo简介

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。大家可以进入hexo官网进行详细查看，因为Hexo的创建者是*人，对中文的支持很友好，可以选择中文进行查看。

Hexo搭建步骤

安装Node.js
安装Git
安装Hexo
GitHub创建个人仓库
生成SSH添加到GitHub
将hexo部署到GitHub
设置个人域名
发布文章

安装Node.js

首先去官网下载Node.js下载地址，npm镜像源下载地址。

安装选项全部默认，一路点击Next。

最后安装好之后，按Win+R打开命令提示符，输入node -v和npm -v，如果出现版本号，那么就安装成功了。

添加国内镜像源

使用阿里的镜像源

npm config set registry https://registry.npm.taobao.org

也可以直接安装淘宝版的npm管理器

npm install -g cnpm --registry=http://registry.npm.taobao.org
cnpm -v    #查看cnpm版本

可以直接使用cnpm代替npm

安装Git

为了把本地的网页文件上传到github上面去，我们需要用到分布式版本控制工具————Git[下载地址]。

安装完成后在命令提示符中输入git --version验证是否安装成功。

新建GitHub仓库

注册GitHub后，选择new repository，输入自己的项目名字，后面一定要加.github.io后缀，README初始化也要勾上。名称一定要和你的github名字完全一样，比如你github名字叫teemos666，那么仓库名字一定要是teemos666.github.io。

然后项目就建成了，点击Settings，向下拉到最后有个GitHub Pages，点击Choose a theme选择一个主题，过一会就能至今访问你的github博客了。

你的博客链接就是teemos666.github.io。

安装Hexo

在合适的地方新建一个文件夹，用来存放自己的博客文件。

在该目录下右键点击Git Bash Here，打开git的控制台窗口，以后我们所有的操作都在git控制台进行，就不要用Windows自带的控制台了。

定位到该目录下，输入npm i hexo-cli -g安装Hexo。可能会有几个报错，无视它就行。

安装完后输入hexo -v验证是否安装成功。

然后就要初始化我们的网站，输入hexo init初始化文件夹，其实就是从GitHub上克隆代码下来，接着输入npm install安装必备的组件。

这样本地的网站配置也弄好啦，输入hexo g生成静态网页，然后输入hexo s打开本地服务器，然后浏览器打开http://localhost:4000/，就可以看到我们的博客啦。

连接Github与本地

首先右键打开git bash，然后输入下面命令：

git config --global user.name "teemos"
git config --global user.email "zzxxccsung@qq.com"

用户名和邮箱根据你注册github的信息自行修改。

然后生成密钥SSH key：

ssh-keygen -t rsa -C "zzxxccsung@qq.com"

打开github，在头像下面点击settings，再点击SSH and GPG keys，新建一个SSH，名字随便。

git bash中输入

cat ~/.ssh/id_rsa.pub

将输出的内容复制到框中，点击确定保存。

输入ssh -T git@github.com，出现你的用户名，那就成功了。

打开博客根目录下的_config.yml文件，这是博客的配置文件，在这里你可以修改与博客相关的各种信息。

修改最后一行的配置：

deploy:
  type: git
  repository: git@github.com:teemos666/teemos666.github.io.git
  branch: master

repository修改为你自己的github项目地址

写文章、发布文章

首先在博客根目录下右键打开git bash，安装一个扩展npm i hexo-deployer-git。

然后输入hexo n "article title"，新建一篇文章。

然后打开\source\_posts的目录，可以发现下面多了一个文件夹和一个.md文件，一个用来存放你的图片等数据，另一个就是你的文章文件啦。

编写完markdown文件后，根目录下输入hexo g生成静态网页，然后输入hexo s可以启动本地服务器，浏览器输入localhost:4000可以预览效果，最后输入hexo d上传到github上。这时打开你的github.io主页就能看到发布的文章啦。

hexo-generator-index从2.0.0开始，已经支持文章置顶功能。你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大。

设置个人域名

现在你的个人网站的地址是teemos666.github.io，如果觉得这个网址逼格不太够，这就需要你设置个人域名了，但是需要花钱。

注册一个阿里云账户，在阿里云上买一个域名，我买的是 justwalking.cn，各个后缀的价格不太一样，比如最广泛的.com就比较贵，看个人喜好咯。

你需要先去进行实名认证，然后在域名控制台中，看到你购买的域名。

点解析进去，添加解析，CNAME，解析地址为teemos666.github.io。

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

然后在你的博客文件source中创建一个名为CNAME文件，不要后缀。内容写上你的域名。

域名解析结果如下：

GitHub设置结果如下：

使用CDN全站加速

每次都需要请求Github远在国外的服务器，并且由于国内高墙的原因，所以访问博客会比较慢或者有时根本打不开，因此需要CDN进行加速。

我也想过使用gitee代替github，毕竟gitee在国内，但是发现最近gitee不能申请pages了，而且也没有GitHub那么方便，于是就放弃了。

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

上面是百度的介绍，啰嗦了一大堆，说白了就是让坐在电脑前的用户就近的获取需要的网络资源，而不用跑去访问遥远的服务器了。既然这么好，那就用呗！国内外都有一些这样的CDN服务提供商，但是大家都知道，访问外面的网络很费劲的。国内的一些CDN提供商也有不少，服务也不错。

我是用的是腾讯云的CDN，因为它新注册每个月送20G的流量，其他的同理。

其实我想用阿里云的，但是腾讯云能白嫖，就先用着腾讯云了。

开通CDN后，到域名管理内添加域名，可能会需要你验证域名的归属，按照提示完成即可，加速区域选择中国境内，加速的区域不同地方不同价格，这个看自己需求。

加速域名填写你的域名，业务类型选择静态加速，源站配置选择自有源，协议选择HTTPS，选择源站域名，填写你的Github Page地址，回源HOST不用管他，自动生成。

打开域名管理页面，启动HTTP2.0配置，强制跳转http->https。

打开证书管理页面，添加域名的SSL证书。

打开阿里云的DNS解析界面，将域名解析地址teemos666.github.io换成腾讯云CDN提供的CNAME的地址。

至此，CDN全站加速完成。

CDN加速前：

CDN加速后：

对比两图，加速效果明显。妈妈再也不怕我看不了博客啦~

站点配置

修改站点配置文件 _config.yml

# Site
title: Teemos's Blog
subtitle: 'Teemos wants to be an explorer'
description: 'Teemos wants to be an explorer'
keywords: ''
author: Teemos
language: zh-CN
timezone: ''

deploy:
  type: git
  repo: git@github.com:teemos666/teemos666.github.io.git
  branch: master

至此，hexo就配置好了，能满足基本使用了。

使用hexo n "article"写文章
使用hexo g生成静态博客页面
使用hexo s本地浏览博客
使用hexo d推送博客至GitHub

hexo目录结构

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml

网站的配置信息，您可以在此配置大部分的参数。

package.json

应用程序的信息。EJS, Stylus和 Markdown renderer 已默认安装，您可以*移除。

package.json{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.8.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-server": "^0.3.3"
  }
}

scaffolds

模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes

主题文件夹。Hexo 会根据主题来生成静态页面。

使用主题

使用主题butterfly，主题版本3.7.8

修改站点配置文件_config.yml，把主题改为butterfly

theme:  butterfly

把主题文件夹中的_config.yml复制到Hexo根目录里，同时重新命名为_config.butterfly.yml。

以后只需要在_config.butterfly.yml进行配置就行。

Hexo会自动合并主题中的_config.yml和_config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。

以下是我的主题的配置：

页面

标签页

前往你的Hexo 博客的根目录
输入hexo new page tags
你会找到source/tags/index.md这个文件
修改这个文件：记得添加 type: “tags”

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

分类页

前往你的Hexo 博客的根目录
输入hexo new page tags
你会找到source/tags/index.md这个文件
修改这个文件：记得添加 type: “tags”

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

友情链接

同理，hexo new page link

404页面

本地预览时，访问出错的网站是不会跳到404页面的。

如需本地预览，请访问http://localhost:4000/404.html

主题配置文件中开启：

# A simple 404 page 
error_404: enable: true subtitle: "页面没有找到" background:

导航菜单

修改主题配置文件

menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

代码

修改主题配置文件

代码高亮：

highlight_copy:  true

代码换行：

code_word_wrap:  true

社交图标

图标网址：Font Awesome

修改主题配置文件

书写格式：图标名：url || 描述性文字

social:
   fab fa-github: https://github.com/teemos666 || Github

顶部图

修改主题配置文件

# The banner image of home page
index_img:
    https://cdn.jsdelivr.net/gh/techfens/img1@main/bgimg.jpg
# If the banner of page not setting, it will show the top_img
default_top_img:
    https://cdn.jsdelivr.net/gh/techfens/img1@main/bgimg.jpg
# The banner image of archive page
archive_img:
    https://cdn.jsdelivr.net/gh/techfens/img1@main/bgimg.jpg

其它页面（tags/categories/自建页面）和文章页的top_img，请到对应的md页面设置front-matter中的top_img

文章封面

文章的markdown文档上,在Front-matter添加cover,并填上要显示的图片地址。

如果不配置cover,可以设置显示默认的cover.

如果不想在首页显示cover,可以设置为false

修改主题配置文件

cover: 
#是否显示文章封面
index_enable: true 
aside_enable: true 
archives_enable: true 
#封面显示的位置
#三个值可配置left , right , both 
position: both 
#当没有设置cover时，默认的封面显示
default_cover: - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

文章页相关配置

文章meta显示

这个选项是用来显示文章的相关信息的。

修改主题配置文件

post_meta: 
    page: 
        date_type: both 
        # created or updated or both主页文章日期是创建日或者更新日或都显示
        date_format: date 
        # date/relative显示日期还是相对日期
        categories: true 
        # true or false主页是否显示分类
        tags: true 
        # true or false主页是否显示标签
        label: true 
        # true or false显示描述性文字
    post: 
        date_type: both 
        # created or updated or both文章页日期是创建日或者更新日或都显示
        date_format: date 
        # date/relative显示日期还是相对日期
        categories: true 
        # true or false文章页是否显示分类
        tags: true 
        # true or false文章页是否显示标签
        label: true
        # true or false 显示描述性文字

文章版权

为你的博客文章展示文章版权和许可协议。

修改主题配置文件

post_copyright:
  enable: true
  decode: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

由于Hexo 4.1开始，默认对网址进行解码，以至于如果是中文网址，会被解码，可设置decode: true来显示中文网址。

如果有文章（例如：转载文章）不需要显示版权，可以在文章Front-matter单独设置

copyright:  false

从3.0.0开始，支持对单独文章设置版权信息，可以在文章Front-matter单独设置

copyright _author: xxxx 
copyright_ author _href: https://xxxxxx.com 
copyright_ url: https://xxxxxx.com 
copyright _info: 此文章版权归xxxxx所有，如有转载，请注明来自原作者

文章打赏

在你每篇文章的结尾，可以添加打赏按钮。相关二维码可以自行配置。

对于没有提供二维码的，可配置一张软件的icon图片，然后在link上添加相应的打赏链接。用户点击图片就会跳转到链接去。

打赏图片可以放在sourse/img/下

link可以不写，会默认为图片的链接。

修改主题配置文件

reward: 
	enable: true 
	QR_code: 
		- img: /img/wechatpay.png 
		  link: 
		  text:微信
		- img: /img/alipay.jpg 
		  link: 
		  text:支付宝

TOC文章目录

在文章页，会有一个目录，用于显示TOC。

修改主题配置文件

toc: 
	enable: true 
	number: true 
	style_simple: true

相关文章推荐的原理是根据文章tags的比重来推荐

修改主题配置文件

related_post: 
	enable: true 
	limit: 6 #显示推荐文章数目
	date_type: created # or created or updated文章日期显示创建日或者更新日

头像

修改主题配置文件

avatar: 
	img: /img/avatar.png 
	effect: true #头像会一直转圈

图片描述

可开启图片Figcaption描述文字显示

修改主题配置文件

photofigcaption:  true

复制相关配置

可配置网站是否可以复制、复制的内容是否添加版权信息

修改主题配置文件

copy:
  enable: true
  copyright:
    enable: true
    limit_count: 50

Footer设置

博客年份

since是一个来展示你站点起始时间的选项。它位于页面的最底部。

修改主题配置文件

footer: 
	owner: 
		enable: true 
		since: 2020

页脚自定义文本

custom_text是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等。支持HTML。

修改主题配置文件

custom_text:  Teemos wants to be an explorer.<br><a rel="nofollow" href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备19158324号</a>

侧边栏设置

侧边排版

可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏。

修改主题配置文件

aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/xxxxxx

  card_tags:
	enable: true

访问人数busuanzi (UV 和PV)

访问busuanzi的官方网站查看更多的介绍。

修改主题配置文件

busuanzi: 
	site_uv: true 
	site_pv: true 
	page_pv: true

运行时间

网页已运行时间

修改主题配置文件

runtimeshow: 
	enable: true 
	publish_date: 6 /17/2021 00 :00:00 ##网页开通时间#格式:月/日/年时间#也可以写成年/月/日时间

网站背景

默认显示白色，可设置图片或者颜色

修改主题配置文件

#图片格式url(http://xxxxxx.com/xxx.jpg) 
#颜色（HEX值/RGB值/颜色单词/渐变色) 
#留空不显示背景
background:

footer 背景

修改主题配置文件

# footer是否显示图片背景(与top_img一致) 
footer_bg:  true

背景特效

修改主题配置文件

canvas_ribbon:
  enable: true
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: true
  mobile: true

页面美化

会改变ol、ul、h1-h5的样式

field配置生效的区域

post 只在文章页生效
site 在全站生效
修改主题配置文件

beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: '#F47466'

网站副标题

可设置主页中显示的网站副标题或者喜欢的座右铭。

修改主题配置文件

subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體）
  # source: 2  調用一言網的一句話（簡體）
  # source: 3  調用一句網（簡體）
  # source: 4  調用今日詩詞（簡體）
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 醉后不知天在水，满船清梦压星河

页面加载动画preloader

当进入网页时，因为加载速度的问题，可能会导致top_img图片出现断层显示，或者网页加载不全而出现等待时间，开启preloader后，会显示加载动画，等页面加载完，加载动画会消失。

有时候感觉好像没啥用

修改主题配置文件:

#加载动画Loading Animation 
preloader:  true

字数统计

要为Butterfly配上字数统计特性,你需要如下几个步骤:

打开hexo 工作目录

npm install hexo-wordcount --save

或 yarn add hexo-wordcount

修改主题配置文件:

# wordcount (字數統計)
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

图片大图查看模式

只能开启一个

fancybox

medium_zoom
修改主题配置文件

# fancybox http://fancyapps.com/fancybox/3/ 
fancybox:  true

medium_zoom:  true

Snackbar 弹窗

Snackbar 弹窗,根据自己爱好开启

修改主题配置文件

snackbar:
  enable: true
  position: top-left
  bg_light: '#49b1f5' # The background color of Toast Notification in light mode
  bg_dark: '#121212' # The background color of Toast Notification in dark mode

Instantpage

当鼠标悬停到链接上超过65 毫秒时，Instantpage 会对该链接进行预加载，可以提升访问速度。

修改配置文件

# https://instant.page/ 
# prefetch (预加载) 
instantpage:  true

公告

card_announcement:
    enable: true
    content: 我的小破站终于搬迁成功啦!

常见问题

md不支持显示相对路径图片

添加图片插件

npm install hexo-asset-image --save

修改_config.yml配置文件

post_asset_folder:  true

然后新建一篇文章

hexo new post abc

这个时候会出现一个abc.md和abc的文件夹，把picture.jpg放入abc文件夹内，引用图片时：

![picture](picture.jpg)

问题得到解决，当然也可以使用CDN、OSS等来存储图片，这样速度会相对来说快一点。

常用命令总结

hexo init  # 初始化博客

hexo n "文章名称"  # 生成新文章
hexo n [layout] "文章名称"  # 生成layout模板的新文章
hexo cl  # 请理已生成的静态文件
hexo g  # 生成博客网页文件
hexo s  # 启动本地服务器
hexo d  # 上传网页文件到github

#生成静态文件前需要安装插件，pug以及stylus的渲染器
npm install hexo-renderer-pug hexo-renderer-stylus --save
npm install hexo-renderer-marked --save
#上传前需要安装插件
npm install --save hexo-deployer-git

#文章显示图片
post_asset_folder: true
npm install hexo-asset-image --save

时间仓促，本文可能有所纰漏，如有发现，请联系我完善一下。

码农公寓

前言

部署Hexo静态博客

静态博客介绍

Hexo简介

Hexo搭建步骤

安装Node.js

添加国内镜像源

安装Git

新建GitHub仓库

安装Hexo

连接Github与本地

写文章、发布文章

设置个人域名

使用CDN全站加速

站点配置

hexo目录结构

_config.yml

package.json

scaffolds

source

themes

使用主题

页面

标签页

分类页

友情链接

404页面

导航菜单

代码

社交图标

顶部图

文章封面

文章页相关配置

文章meta显示

文章版权

文章打赏

TOC文章目录

相关文章

头像

图片描述

复制相关配置

Footer设置

博客年份

页脚自定义文本

侧边栏设置

侧边排版

访问人数busuanzi (UV 和PV)

运行时间

网站背景

footer 背景

背景特效

页面美化

网站副标题

页面加载动画preloader

字数统计

图片大图查看模式

Snackbar 弹窗

Instantpage

公告

常见问题

添加图片插件

常用命令总结

相关文章