关于初期建博的一些说明

关于初期建博客的一些说明

前言

首先要特别鸣谢Fany Full’s Blog，以及WSKH0929的教程，对我的帮助真的很大。

建站参考教程 （超级详细 真从零开始）

其实很早之前就想建一个存放学习笔记的一个博客，之前也试过从网上找的一些博客源码放在一个虚拟主机上，实在时太麻烦了，需要域名，主机，以及维护成本。后来接触到GitHub,了解到页面托管这个功能才让我死而复燃的心决定去搞一个自己的学习博客！

前期准备工作

  1. github 账号

    GitHub官网GitHub

  2. 安装Git

    Git官网Git (git-scm.com)，国内访问会比较慢

    国内镜像网站CNPM Binaries Mirror (npmmirror.com)

  3. 安装Nodejs

    Node官网Node.js (nodejs.org)
    在Windows上安装时务必选择全部组件，包括勾选 Add to Path。

  4. GitHub加速上网软件

    瓦特工具箱(Steam++官网) - Watt Toolkit (steampp.net)

    steam++在Git和PicGo上连不上GitHub，使用时要把加速关闭

  5. 安装PIcGo图床

    PicGo官网PicGo

  6. 一个markdown编辑器

Nodejs必须安装，可以使用cdm命令行检验是否安装成功（图为安装成功示例）

image-20240112110858062

建一个Page托管的仓库

  1. 登录你的GitHub账号

  2. 新建仓库，仓库名为username.github.io，username替换为GitHub账户的实际ID，例如：wechatid.github.io ，实际博客地址就是 https://wechatid.github.io

    1. 配置页面托管

    ​ image-20240112125530706

    注意：每个用户只能开启一个pages托管

Git配置用户信息

  1. 在电脑本地新建文件夹，用来存放博客的所有文件。我的是“blog”，所以下面就说的blog文件夹实际就是存放博客的文件夹。

  2. 打开blog文件夹，右击鼠标，点击Git Bash here，弹出命令窗口。

  3. 在窗口中输入下面两行命令

    1
    git config --global user.name "user_name" # user_name填入GitHub用户名
    1
    git config --global user.email "user_email" # user_email填入GitHub注册的邮箱

查看或者检验Git用户信息

1
git config user.name
1
git config user.email

Git 与GitHub建立ssh连接

  1. 在blog文件夹内打开Git Bash here命令窗口，输入命令后，按三次回车，默认不设置密码。

    1
    ssh-keygen -t rsa -C "user.email" # user.email 为GitHub 上注册的邮箱

  2. 打开电脑文件夹C:\Users\username\.ssh,username是你的电脑账号名称。如果没有.ssh文件夹请点击查看-显示-隐藏的项目。

  3. 找到id_rsa.pub,用记事本打开，全选复制。

    Ps：id_rsa 是私钥不能泄露，id_rsa.pub 是公钥可以放心告诉他人。

  4. 打开Add new SSH key (github.com)页面，新建一个SSH Keys

    Title随便写，Key粘贴刚刚复制的内容。

  5. 使用下面命令验证是否连接成功

    1
    ssh -T git@github.com

    连接成功会提示”Hi username...“

安装hexo

什么是hexo

Hexo 是一个简单、快速、强大的基于 Github Pages 的博客框架，支持 Markdown 格式，有众多优秀插件和主题。

Hexo原理

由于 Github Pages 存放的都是静态文件，博客存放的不只是文章内容，还有文章列表、分类、标签、翻页等动态内容，假如每次写完一篇文章都要手动更新博文目录和相关链接信息，相信谁都会疯掉，所以 Hexo 所做的就是将这些 md 文件都放在本地，每次写完文章后调用写好的命令来批量完成相关页面的生成，然后再将有改动的页面提交到github

安装和初始化

  1. 在blog文件夹内打开Git Bash here命令窗口，输入命令安装hexo

    1
    npm install -g hexo-cli

  2. 安装完成后，输入命令进行初始化设置。

    1
    hexo init

本地渲染与预览

  1. 输入命令，生成静态文件

    1
    hexo g

  2. 执行下面命令，开启本地预览。在浏览器中打开http://localhost:4000/，即可以看到初始化完成后的博客。

    1
    hexo s

如果本地预览出问题了，请按顺序输入命令hexo g,hexo clean,hexo s

推送前准备

配置站点文件

hexo 有 2 种 _config.yml 文件，一个是根目录下的全局的 _config.yml，一个是各个主体 theme 下的 _config.yml。将前者称为站点配置文件， 后者称为主题配置文件。

打开blog目录下站点配置文件 _config.yml，配置有关 deploy 的部分：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: main

打开仓库点击Code-SHH复制**repo**

branch一般是main ，可以在仓库里面看

安装部署插件

在Git Bash here输入安装命令

1
npm install hexo-deployer-git --save # 安装部署插件

如果没有安装部署插件，hexo d会报错

到这里，如果不用fluid主题的话，可以直接推送到GitHub，点我跳转推送标题

配置 fluid 主题

安装Fluid主题

1
npm install --save hexo-theme-fluid

然后在blog目录下创建 _config.fluid.yml，将_config.yml内容复制过去。

应用fluid主题

修改blog目录下_config.yml的内容：

1
2
3
theme: fluid  # 指定主题

language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

最好连_config.fluid.yml的也改了

创建关于页

使用命令hexo new page about

创建成功后修改 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

1
2
3
4
5
6
---
title: 标题
layout: about
---

这里写关于页的正文，支持 Markdown, HTML

layout: about 必须存在，并且不能修改成其他值，否则不会显示头像等样式。

推送到Github

在安装部署插件之后，如果发生修改了，需要重新渲染主题。

1
hexo g

推送到GitHub

1
hexo d

发布文章

新建文章执行命令：hexo new "name"

新建文章：打开blog\source\_posts目录，新建一个md类型的文件，文件名就是文章标题。

删除文章：打开blog\source\_posts目录，选择你要删除的文章，删除。然后重新渲染预览就删除了。

文章头部文件：

1
2
3
4
5
6
7
8
---
title: 关于初期建博的一些说明
date: 2024-01-12 09:04:49
tags: 博客
categories: 博客
index_img: https://gcore.jsdelivr.net/gh/wechatid/image/blog/202401120852183.jpg
banner_img: https://gcore.jsdelivr.net/gh/wechatid/image/blog/202401120852183.jpg
---
键 值
title 文章名称
date 文章发布时间
tags 标签
categories 分类
index_img 封面图
banner_img 顶部图

其中tags标签,categories分类都可以定义多个，如[博客,学习,代码]

英文冒号后面留一个空格

博客
#博客
关于初期建博的一些说明
https://wechatid.github.io/2024/01/12/blog_build/
作者
Imscamd
发布于
2024年1月12日
许可协议