Blog搭建基础

本帖作为本blog前期搭建record,记录我的blog搭建过程,方便以后查阅。

本blog为静态博客,基于hexo框架anzhiyu主题搭建

准备

  • 操作系统:Windows10/11
  • Node
  • Git
  • GitHub 帐号
  • Hexo
  • Visual Studio Code
  • 一个域名(推荐买个域名)
  • 云服务器(可选)

安装Node.js

  1. Node.js官网下载安装包,安装完成后,打开命令行,输入node -vnpm -v,如果出现版本号,则说明安装成功。(官网打不开就用中文网)

  2. 历史版本下载页面

  3. 安装完成后,检查是否安装成功。在键盘按下win + R键,输入CMD,然后回车,打开CMD窗口,执行node -v命令,看到版本信息,则说明安装成功。我的版本是v20.18.0,npm版本是v10.8.2

  4. 修改npm源。npm下载各种模块,默认是从国处服务器下载,速度较慢,建议配置成淘宝镜像。打开CMD窗口,运行如下命令:

    1
    npm config set registry https://registry.npm.taobao.org

安装Hexo

  1. 在目标路径打开CMD窗口,输入如下命令安装

    1
    npm install -g hexo-cli
  2. 安装完后输入hexo -v验证是否安装成功。我的版本是7.3.0

Github注册与创建仓库

  1. Github官网Sign up(注册),填写自己的邮箱、密码、用户名等信息,然后用邮箱验证即可完成。

  2. 注册完成后,点击右上角的+按钮,选择New repository,创建一个<用户名>.github.io的仓库。

    • 仓库的格式必须为:<用户名>.github.io (注意:前缀必须为用户名,不要等后面404了再来为什么!!!)
    • Description:为描述仓库(选填)
    • 勾选 Initialize this repository with a README 初始化一个 README.md 文件(选填)
    • 点击 Creat repository 进行创建

Git安装

  1. git官网下载,太慢可以通过淘宝的开源镜像下载,下载版本根据自己的需求选择,一路回车式安装Git即可。

  2. 安装完成后,打开命令行,输入git --version,如果出现版本号,则说明安装成功。我的的版本是2.47.0

  3. 点击电脑左下角开始即可看见Git Bash

    • Git CMD是windows 命令行的指令风格
    • Git Bash是linux系统的指令风格(建议使用)
    • Git GUI是图形化界面(新手学习不建议使用)
  4. 常用命令

    1
    2
    3
    git config -l  //查看所有配置
    git config --system --list //查看系统配置
    git config --global --list //查看用户(全局)配置
  5. 配置用户名和邮箱

    1
    2
    git config --global user.name "你的用户名"
    git config --global user.email "你的邮箱"
  6. 通过git config -l检查是否配置成功,至此git安装及配置全部完成。

连接至Github

  1. 执行以下命令生成ssh公钥,此公钥用于你的计算机连接Github

    1
    ssh-keygen -t rsa -C "你的邮箱"

    之后打开C盘下用户文件夹下的.ssh的文件夹,会看到 id_rsa.pub
    用记事本打开上述图片中的公钥(id_rsa.pub),复制里面的内容,然后开始在github中配置ssh密钥。

  2. 将 SSH KEY 配置到 GitHub
    进入github,点击右上角头像 选择settings,进入设置页后选择 SSH and GPG keys,名字随便起,公钥填到Key那一栏。

  3. 测试连接,输入以下命令

    1
    ssh -T git@github.com

    出现连接到账户的信息,说明已经大功告成,至此完成了环境准备工作。

初始化 Hexo 项目

  1. 用vscode打开目标路径(我的路径为D:Codefield/Blog)文件夹,打开一个终端,执行hexo init初始化项目。

    1
    hexo init 
  2. 输入npm i安装相关依赖。

    1
    npm i
  3. 初始化项目后,blog有如下结构:

    • node_modules:依赖包
    • scaffolds:生成文章的一些模板
    • source:用来存放你的文章
    • themes:主题
    • .npmignore:发布时忽略的文件(可忽略)
    • _config.landscape.yml:主题的配置文件
    • config.yml:博客的配置文件
    • package.json:项目名称、描述、版本、运行和开发等信息
  4. 输入hexo三件套hexo c;hexo g;hexo s启动项目

  5. 打开网址 ,看到效果,说明你的博客已经构建成功了。

将静态博客挂载到 GitHub Pages

  1. 安装 hexo-deployer-git

    1
    npm install hexo-deployer-git --save
  2. 修改 _config.yml 文件
    在blog-demo目录下的_config.yml,就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。修改最后一行的配置,将repository修改为自己的github项目地址,还有分支要改为main代表主分支(注意缩进)。

    1
    2
    3
    4
    deploy:
    type: git
    repository: git@github.com:XIAO-ZE1/XIAO-ZE1.github.io.git
    branch: main
  3. 修改好配置后,运行如下命令,将代码部署到 GitHub(Hexo三连)。

    1
    2
    hexo clean && hexo generate && hexo deploy  // Git BASH终端
    hexo clean; hexo generate; hexo deploy // VSCODE终端
    • hexo clean:删除之前生成的文件,若未生成过静态文件,可忽略此命令。
    • hexo generate:生成静态文章,可以用hexo g缩写
    • hexo deploy:部署文章,可以用hexo d缩写

    注意:deploy时可能要你输入 username 和 password。

    如果出现Deploy done,则说明部署成功了。
    稍等两分钟github部署完毕,打开浏览器访问github pagehttps://XIAO-ZE1.github.io ,就可以看到博客内容了。