hexo+netilify+twikoo 建立个人博客 （mac）

参考博客：

[小冰大佬的博客](https://zfe.space/)
[安知鱼的博客](https://anzhiy.cn/)
[爱铺bug的熊博客]( https://blog.cuijiacai.com/)

其他的资源

//一些图标
[阿里巴巴矢量库](https://www.iconfont.cn)
//图片
[vilipix](https://www.vilipix.com/)

注意：一些地方需要到外网来搭建，建议先购买梯子

使用的工具及系统环境以及花销:

花销：19rmb
博客框架是hexo，博客文件拖管于github，博客网站用netlify生成，国内访问采用vercel加速以及评论区制作
系统环境是macOS，后续的教程都基于macOS的终端及其包管理软件homebrew进行
域名是从阿里云购买的，9rmb/年
图床使用的安知鱼的图床，懒得搭建了 10r/1G
https://image.anzhiy.cn/user/albums

hexo博客框架

介绍

hexo是一个基于nodejs的静态博客网站生成器，作者是来自台湾的Tommy Chen
使用的one markdown进行日常的写博客，保存到_post文件下
（目前还需要新建 hexo n ‘博客主标题’）

环境配置

hexo是一个基于nodejs的静态博客网站生成器，作者是来自台湾的Tommy Chen

homebrew 安装

命令安装：

brew install node # homebrew安装nodejs

确认环境配置信息

1
2
node -v # 查看node版本信息
npm -v # 查看npm版本信息

npm默认的官网源可能会比较慢,需要设置成淘宝镜像

1
2
3
npm config get registry # 查看原来的源
npm config set registry https://registry.npm.taobao.org # 修改为淘宝源
npm config get registry # 查看现在的源

生成博客

npm install hexo-cli -g # 全局安装hexo命令行工具
其中-g参数表示全局安装，没有这个参数就只在当前目录下安装，建议全局安装。

初始化

新建文件夹 “博客名字”

hexo init "你的博客目录名称" # 目录名称不含空格的时候双引号可以省略

进入博客目录：

(1)右键文件夹->服务->新建位于文件夹位置的终端窗口
(2)终端->cd "博客目录"
（安装一些其他的插件: npm install "所要安装的插件名"# 安装的依赖项在package.json文件的dependencies字段中可以看到）

博客项目目录结构介绍

_config.yml

为全局配置文件，网站的很多信息都在这里配置，比如说网站名称，副标题，描述，作者，语言，主题等等。具体可以参考官方文档：https://hexo.io/zh-cn/docs/configuration.html。

scaffolds

骨架文件，是生成新页面或者新博客的模版。可以根据需求编辑，当hexo生成新博客的时候，会用这里面的模版进行初始化。

source

这个文件夹下面存放的是网站的markdown源文件，里面有一个_post文件夹，所有的.md博客文件都会存放在这个文件夹下。现在，你应该能看到里面有一个hello-world.md文件。

themes

网站主题目录，hexo有非常丰富的主题支持，主题目录会存放在这个目录下面。
我们后续会以默认主题来演示，更多的主题参见：https://hexo.io/themes/

生成新文章

1
2
3
hexo new post "test" # 会在 source/_posts/ 目录下生成文件 ‘test.md’，打开编辑
hexo generate        # 生成静态HTML文件到 /public 文件夹中
hexo server          # 本地运行server服务预览，打开 http://localhost:4000 即可预览你的博客

快捷设置：
package.json中增加
“dev”: “hexo clean && hexo g && hexo s”

主题以及hexo命令

更多的主题可以从官网下载。
更详细的hexo命令可以查看文档：https://hexo.io/zh-cn/docs/commands

博客配置

Site
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
title: Hexo  # 网站标题
subtitle:    # 网站副标题
description: # 网站描述
author: John Doe  # 作者
language:    # 语言
timezone:    # 网站时区, Hexo默认使用您电脑的时区

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child'
## and root as '/child/'
url: http://yoursite.com   # 你的站点Url
root: /                    # 站点的根目录
permalink: :year/:month/:day/:title/   # 文章的 永久链接 格式   
permalink_defaults:        # 永久链接中各部分的默认值

# Directory   
source_dir: source     # 资源文件夹，这个文件夹用来存放内容
public_dir: public     # 公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags          # 标签文件夹     
archive_dir: archives  # 归档文件夹
category_dir: categories     # 分类文件夹
code_dir: downloads/code     # Include code 文件夹
i18n_dir: :lang              # 国际化（i18n）文件夹
skip_render:                 # 跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。    

# Writing
new_post_name: :title.md  # 新文章的文件名称
default_layout: post      # 预设布局
titlecase: false          # 把标题转换为 title case
external_link: true       # 在新标签中打开链接
filename_case: 0          # 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false      # 是否显示草稿
post_asset_folder: false  # 是否启动 Asset 文件夹
relative_link: false      # 把链接改为与根目录的相对位址    
future: true              # 显示未来的文章
highlight:                # 内容中代码块的设置    
  enable: true            # 开启代码块高亮
  line_number: true       # 显示行数
  auto_detect: false      # 如果未指定语言，则启用自动检测
  tab_replace:            # 用 n 个空格替换 tabs；如果值为空，则不会替换 tabs

# Category & Tag
default_category: uncategorized
category_map:       # 分类别名
tag_map:            # 标签别名

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD     # 日期格式
time_format: HH:mm:ss       # 时间格式    

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10           # 分页数量
pagination_dir: page   # 分页目录

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape   # 主题名称

# Deployment
## Docs: https://hexo.io/docs/deployment.html
#  部署部分的设置
deploy:     
  type: '' # 类型，常用的git

Github项目文件托管

小白须知：这一步需要进入外网，需要梯子，加速器等

git 是在本地进行安装的

创建本地仓库，然后推送到远端服务器：

1
2
3
4
5
6
7
cd "博客目录"
git init
git add .
git commit -m "提交信息"
git remote add origin "远端github仓库地址"
git branch -M main
git push -u origin main

ClouldFlare加速 or vercel加速

twikoo评论系统

一些出现的错误

Nelify 部署异常

添加github贡献图

评论区错误