Notes
November 11, 2022

My Blog

My Blog

本文使用的是 macOS，Windows 和 Linux 的使用方法也类似

所有填写内容处的 <> 都是表示按实际情况填写的内容，< 和 > 不填写。如我填写 <用户名>.github.io 即 owlllovo.github.io

搭建

  1. 安装所需软件

    • Node.js

    • Hexo-CLI

      1
      npm install hexo-cli -g

  2. 新建博客文件夹

    1
    mkdir <Blog>
    1. 文件夹可以取任意名字，可以放在任何位置
    • 博客的所有文件都会存储在这个文件夹内，所以出了任何状况都可以把这个文件夹删除从头开始

  3. 初始化 Hexo

    1
    2
    cd <Blog>
    hexo init

    此时博客文件夹内会自动生成大量文件

    初始化完成即可本地启动博客

    1
    hexo server		# server 可简写为 s

    1. 打开浏览器，访问 localhost:4000

    2. 可以看到博客的本地预览，初始化的时候已经自动生成了一篇文章 Hello World

部署到网络

  1. 注册 GitHub 账号

  2. 新建仓库

    Repository name 填写 <用户名>.github.io

    其他内容可以保持默认

    Create repository

    此时可以看到自己的仓库地址

  3. 在博客文件夹安装 Git 插件

    1
    npm install hexo-deployer-git --save

  4. 编辑 _config.yml 配置环境

    文件底部 # Deployment 栏

    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
      type: 'git'
      repo: <仓库地址>
      branch: main

    注意空格

  5. 部署到 GitHub

    1
    hexo deploy		# deploy 可简写为 d

    可能会要求输入 GitHub 账号及密码

    稍等几分钟再用浏览器访问 https://<用户名>.github.io 即可在网络访问博客

  6. [可选] 使用自己的域名作为博客网址

    1. 前往 GitHub 仓库，顶部导航栏Settings，左侧菜单栏 Pages

    2. 在 Custom domain 输入自己的域名，可以包含二级域名，Save

      如图所示添加了二级域名 blog，也可以不添加使用 owlllovo.com

    3. 前往域名管理页面，添加 DNS 解析

      Hostname Type Address / Value
      二级域名 CNAME <用户名>.GitHub.io

      如果没有添加二级域名 Hostname 留空

    4. 等待解析完成即可通过自定义域名访问博客

使用

写文章

  1. 在博客 /source/_posts 新建 <博客名>.md

  2. 编辑博客

    开头输入 --- Enter

    自动生成文章头，至少输入以下信息：

    1
    2
    3
    4
    ---
    title: <标题>
    date: <时间 YYYY-MM-DD hh:mm:ss>
    ---

    也可以输入更为完整信息：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ---
    title: 
    date: 
    author: 
    img: 
    top: 
    cover: 
    coverImg: 
    password: 
    toc: 
    mathjax: 
    summary: 
    categories: 
    tags:
    ---

  3. 重新生成博客

    1
    2
    3
    hexo clean
    hexo g
    hexo s

主题

  1. 找到自己喜欢的主题

  2. 终端中克隆主题到本地

    1
    git clone <主题 URL> theme/<主题名>

  3. 编辑 _config.yml 修改主题

    # Extensions 中的 theme: 将 landscape 修改为要用的主题名

  4. 重新生成博客

    1
    2
    3
    hexo clean
    hexo g
    hexo s

图床

  1. 下载安装 PicGo

  2. GitHub 新建仓库

    可以取任意名字

  3. 打开 PicGo，图床设置 GitHub 图床 按提示填入信息

  4. 将图片拖入 PicGo，上传完成即可在相册中复制图片 URL

  5. 将图片 URL 粘贴到博客中即可将图片插入

Mathjax

需要在博客中插入数学公式时可以使用 Mathjax

插件

文件名中文转拼音

  1. 安装

    1
    npm i hexo-permalink-pinyin --save

  2. 配置

    在 _config.yml 文件末尾添加

    1
    2
    3
    permalink_pinyin:
      enable: true
      separator: '-'
    • enable：启用
    • separator：拼音之间分隔符

  3. 应用

    重新生成 Blog

    1
    2
    3
    hexo clean
    hexo generate
    hexo deploy

常见问题

因大小写造成 404

  1. 打开 .deploy_git .git 文件夹，将config 中的 ignorecase 设置为 false

  2. 删除 .deploy_git 除了 .git 的所有文件

  3. 重新生成 Blog

    1
    2
    3
    hexo clean
    hexo generate
    hexo deploy

About this Post

This post is written by OwlllOvO, licensed under CC BY-NC 4.0.

#Hexo#Web