静态blog搭建

00|前排提示

静态博客好，问题真不少。

常见静态站点生成器有Hexo(JS)、Hugo(golang)、Jekyll(Ruby)，其中Hexo最常见、主题和插件都十分丰富；Jekyll是GitHub使用的站点生成器。

01|静态站点原理

当前静态站点依赖于git仓库服务。在本地通过静态站点生成器解析标记语言写作的文档，生成站点的html、css和js文件。将生成的文件结构部署在网络中的git仓库服务，通过git仓库提供的Pages（页面）服务使用户直接访问到部署的站点文件，形成静态站点。

常用的git仓库服务有GitHub、GitLab、Coding、Gitee等，但Gitee的页面服务受限，通常不做考虑；常用的标记语言有markdown、RST等。本文使用最常用的GitHub+markdown组合。由于最新版Typora(1.0+)已经收费，推荐使用VSCode插件进行markdown书写。

02|Hexo

Hexo是nodejs的一个发行包，使用需要相应环境，参考另一篇进行配置还没填坑，这里默认读者已经配置好环境。

Hexo：6.0.0

nodejs：14.16.1 pnpm：7.1.7

安装配置

使用pnpm安装，看到输出hexo版本就是成功，Windows下可能禁止了powershell脚本执行，需要在“设置-开发者选项”打开或切换为cmd执行。

pnpm install hexo
hexo v
hexo init {blog_folder_name}
cd {blog_folder_name}
pnpm install

Hexo创建的站点目录结构如下

├── _config.yml #hexo的配置文件
├── node_modules #nodejs组件库
├── package.json #npm的包管理文件
├── scaffolds #hexo的模板文件，依靠这里识别并生成站点
├── public #生成的静态文件存放地方，可以提交到GitHub
├── source #博客源文件目录，推荐使用markdown文件编写
|   └── _posts #站点文件主目录，一般文章保存在这里
├── _config.{theme_name}.yml #主题的配置文件
└── themes #主题目录，下载的主题文件夹放在这里

一般只需要修改hexo配置文件、主题配置文件和站点主目录，即可完成站点的生成和发布。这里使用的是我修改后的hexo-theme-frame，可以在LiteTools文件夹下找到。

Hexo配置文件参考， 详细可以参看官方文档

title: {your_site_title}
subtitle: ''
description: ''
keywords:
author: Kyana
language: zh

url: {your_site_permanent_link} #一定要设置，不然会无法应用CSS和JS
permalink: blogs/:name.html #每个文章永久链接形式
permalink_defaults:
pretty_urls:
  trailing_index: false #是否显示index
  trailing_html: false #是否显示.html

theme: frame #使用什么主题

#这一块参看官方文档，一般不建议动
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
i18n_dir: :lang
code_dir: downloads/code
skip_render:

new_post_name: :title.md #新文章的名字
default_layout: post #新文章默认布局
titlecase: false #标题大小写
external_link: #点击链接在本标签打开还是新建标签
  enable: true
  field: site
filename_case: 0
render_drafts: false #渲染草稿
post_asset_folder: false
relative_link: false
future: true
highlight: #代码高亮设置
  enable: true
  line_number: true #开启行号
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

index_generator:
  path: ''
  per_page: 10 #每页展示多少文章
  order_by: -date #文章展示方式
date_format: YYYY-MM-DD
time_format: HH:mm:ss
updated_option: 'mtime'
per_page: 10
pagination_dir: page

deploy: #部署到GitHub
  type: git
  repo: {your_github_repo_link}
  branch: {your_repo_branch}

对修改后的hexo-theme-frame设置

language: zh
stylesheets:
- /css/style.css
scripts:
- /js/frame.js
favicon: /images/favico.png #show in head
date_format: MMM D, YYYY

site_brand_name: Kyana
logo_image:
  enable: false
  image_path: /logo.png

profile:
  title: {your_title}
  body: {discription}
  image: #e.g. /pic/image.jpg
  links: #as you want, e.g.
    Github: "{your_github_link}"

menu: #as you want, e.g.
  标签: /tags/

footer:
  copyright_info:
    enable: true
    author: {your_name}
  powered_by: #powered by hexo & frame
    enable: true
  other_info:
    enable: true
    content: {your_other_content}
color_mode: default

完成设置后的工作流#

hexo new {title} #新建文章，保存在_post文件夹下
hexo new page {name} #新建页面，保存在source文件夹下
hexo s(erver) #在本地3000端口打开服务，提供站点访问，可以热重载，不生成文件
hexo deploy (hexo g(enerate)) #部署到网络中，会自动执行生成文件命令

使用中的问题

  1. 主题也可以使用包管理器pnpm下载，会在"node_modules"文件夹中，有时渲染失败是因为缺少主题所用配置文件的生成器，如ejs、stylus等，搜索并使用包管理器下载后重新渲染即可。
  1. 可以手段发布"public"文件夹中内容到git，也可以使用"hexo-deployer-git"自动部署。如果使用了自定义域名，自动部署后会无法正确解析，需要在根目录下放置"CNAME"文件，内容是自定义域名即可。

03|Hugo

Hugo是基于golang的静态站点生成器，相比Hexo该有的功能都有，主打一个快速，但因为教新，主题不是很多。

在GitHub下载hugo时，会遇到一个"hugo_extended"提供了更多功能但用不上，这次只使用最新版（v0.105.0）的基础版hugo。hugo的运行需要golang环境，由于不需要使用hugo安装额外包或者开发，只需要安装官网指引默认安装即可。

安装配置

hugo的本体和主题配置文件是写在一起的，都在根目录下的config文件，hugo默认配置文件格式是toml，但也支持yml，作者使用相对更简单明了的yml进行配置。使用的主题PaperMod可以参考的配置，Hugo可以参看官方文档。

baseUrl: {your_page_link}
title: {your_page_title}
theme: PaperMod #选择主题
copyright: {your_name}
defaultContentLanguage: zh
languageCode: zh-CN #用于head信息生成
hasCJKLanguage: true #是否有中日韩文，用于字数统计
enableEmoji: true
enableRobotsTXT: true

buildDrafts: false
buildFuture: false
buildExpired: false
disableKinds:
  - RSS #不生成RSS的XML文件，减小体积
minify: #启用压缩CSS、JS
  disableXML: true
  minifyOutput: true

params: #主题的配置参数
  author: {your_name}
  defaultTheme: dark
  homeInfoParams:
    enable: true
    Title: {your_title}
    Content: {your_content}
  socialIcons:
    - name: {your_choose}
      url: {your_link}
  ShowToc: true #显示目录
  TocOpen: true #目录默认打开
  ShowReadingTime: true #显示估计阅读时间
  ShowBreadCrumbs: true #显示当前位置
  ShowPostNavLinks: true #显示上一篇和下一篇
  ShowCodeCopyButtons: true #显示代码复制按钮

markup:
  highlight:
    style: monokai
    lineNos: true

menu: #生成顶部菜单
  main:
    - identifier: Archives
      name: 归档
      url: /archives/
      weight: 10 #权重越大越靠右
    - identifier: Categories
      name: 分类
      url: /categories/
      weight: 20
    - identifier: Tags
      name: 标签
      url: /tags/
      weight: 30

完成后的工作流

hugo server #使用hugo在本地提供服务，预览页面
hugo #生成静态文件到public文件夹
cd public
git init #初始化git仓库，只用做一次
git remote add origin {your_repo_link} #添加远程库，只做第一次
git add * #添加全部文件到暂存区
git commit -m "Issue new passage." #提交更改，一定要写信息，可以随便写但建议有意义方便管理
git push origin -u master/main #推送到远程库，默认推送本地master分支，GitHub使用main做新仓库默认分支名

04|Jekyll

由于是GitHub使用的生成器，只需要将markdown文件放在GitHub仓库，打开page服务并选择主题即可，参看官方文档。

主题等的配置只需要在根目录下添加"_config.yml"即可。

配置文件

theme: timemachine

鄂ICP备16001978号-2