Mac 下使用github + hexo 搭建个人博客

发表于 更新于 分类于

简介

1.环境安装
2.配置github
3.更换主题（此处以next为例）
4.写文章

一.环境安装

1.安装homebrew（如果已安装可跳过）
官方地址：https://brew.sh

//查看版本
brew -v
//Homebrew 3.1.6-18-gfca0fb1
//Homebrew/homebrew-core (git revision 960d90b94c; last commit 2021-05-11)
//Homebrew/homebrew-cask (git revision a4dd4a1908; last commit 2021-05-11)

2.通过homebrew 安装 node.js

brew install node

3.检查node 

node -v
//v16.2.0

4.检查npm是否安装成功

npm -v
//7.13.0

5.homebrew 安装git

brew install git

6.检查git 安装情况

git version
//git version 2.32.0 (Apple Git-132)

7.使用npm 安装hexo

sudo npm install -g hexo-cli

8.安装完成后，创建文件夹

cd ～/Desktop
mkdir Blog
cd Blog

9.在文件夹下初始化hexo

hexo init

10.初始化成功后，可预览

hexo s
hexo s -p 4001 //端口4000如果被占用，可以指定端口号

此时 hexo 已经处理完成，可本地预览

二.github

1.github账号申请并创建仓库命名为：用户名.github.io

2.将Blog初始化为git仓库并推送到github上

三.更换主题（此处以next为例）

1.Hexo官方可以自由选择自己喜欢的主题
在Bolg目录文件下终端输入

$ git clone https://github.com/iissnan/hexo-theme-next.git themes/next

或者官网直接下载，修改名称为next

将主题拷贝到Blog下theme文件下，此文件下存放所有使用的主题，最后由站点配置文件(根目录下_config.yml文件)决定使用哪个主题。

2.主题设置：
1>打开 Blog/_config.yml 文件

    # Site
    #网站标题
    title: XXX的博客
    #网站副标题
    subtitle: '雷峰塔下盼轮回，不及你浅笑一枚。 西湖细柳缘纷飞,可悲可叹独自醉。'
    #描述，介绍
    description: '主要记录平时学习或者解决一些问题时的过程或是心得体会什么的东西'
    # 网站关键字
    keywords:
    # 博主姓名
    author: XXX
    # 语言：zh-CN 是简体中文
    language:
        - zh-CN
    # 时区
    timezone: Asia/Shanghai

    # URL
    ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
    #网站域名
    url: https://XXX.com

    # Deployment (部署)
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
      type: git
      repo: git@github.com:XXX/XXX.github.io.git
      branch: main #分支

2>其他设置：
打开 Blog/themes/next/_config.yml

#主题颜色
darkmode: true

#风格
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

#左侧边栏按钮
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  # schedule: /schedule/ || fa fa-calendar
  # sitemap: /sitemap.xml || fa fa-sitemap
  # commonweal: /404/ || fa fa-heartbeat

3.点击menu的时候出现 Cannot GET /categories/ 的时候
是因为没有初始化categories的子目录，控制台输入

hexo new page "categories"
hexo new page "about"
hexo new page "tags"

这样就是在source文件初始化这些目录，并生成index文件，就可以正常使用了，其他同理。

打开各个目录下/index.md 文件修改：

categories

---
layout: page
title: 分类
date: 2022-01-27 22:33:06
tags:
type: "categories"
comments: false
---

tags

---
layout: page
title: 标签
date: 2022-01-27 22:32:57
tags:
type: "tags"
comments: false
---

about

---
layout: page
title: 关于
date: 2022-01-27 22:32:57
tags:
type: "about"
comments: false
---

处理完成后

 $hexo s
 $hexo g
 $hexo d

此时浏览器中输入 用户名.github.io 可看效果

四.写文章

1.新建一篇文章

$hexo new "文件名"

文章内容编辑：

---
title: 微信小程序开发之——Dialog弹窗
categories:
  - iOS
  - Flutter
  - Swift
tags:
  - Swift
abbrlink: c2e9cdea
date: 2021-11-26 15:06:32
---
文章内增加折叠按钮：
<!--more-->

2.启动本地服务器，用于预览主题

$hexo server(简写：hexo s)

3.生成网站静态文件到默认设置的 public 文件夹

$hexo generate(简写：hexo g)

4.自动生成网站静态文件，并部署到设定的仓库

$hexo deploy(简写：hexo d)

清除缓存文件 db.json 和已生成的静态文件 public

$hexo clean

五.绑定个人域名

1.准备域名：注册一个自己的域名

域名的DNS解析，登录域名管理后台-域名列表-解析列表：

**记录类型选择-CNAME(将域名指向另一个域名)**

**主机记录-@**

**记录值-xxx.github.io**

**解析线路-默认**

**TTL-10分钟**

2.本地CNAME文件

完成以上设置后，在本地的hexo中的source文件夹下（一定在source文件夹下创建！）创建一个CNAME文件（不带任何后缀）

然后将我们注册的自定义的域名填写进去 

3.修改本地的config

需要修改**_**config.yml文件，在URL中填入我们的自定义域名：

url:https://xxx.com

4.绑定域名

登录github-点击settings：- pages - custom domain - 将自己的域名添加即可