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

确认环境配置信息

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

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

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/

生成新文章

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
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: # 永久链接中各部分的默认值

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 # 时间格式

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 是在本地进行安装的
## 创建本地仓库，然后推送到远端服务器：

cd “博客目录”
git init
git add .
git commit -m “提交信息”
git remote add origin “远端github仓库地址”
git branch -M main
git push -u origin main
```