How to build a Blog

前言

之前使用过 Hexo 搭建个人博客，但是感觉维护起来不方便，提交代码，还要编译发布

之前的代码：imarshio.github.io.zip

这次经过一段时间的探索，我选择了 VuePress + Github Pages 搭建个人博客。

之前基本没有接触过 vue 系列，所以这次搭建环境算是从0开始。

首先，VuePress 版本我这里选择了2.x，虽然目前他仍处于RC阶段，但我看他已经上线有很长一段时间了，因该不会存在很明显的BUG，就算存在，我也可以通过提交 issue 或通过其他办法绕过去，而且我考虑到 VuePress 1.x 是基于 vue 2.x的，VuePress 2.x 是基于 vue 3.x 的，但是 vue 2.x已经停止了维护，综合考虑，我选择了 VuePress 2.x。

其次，安装 VuePress 的前提是安装 Node.js v18.16.0+，Node.js 我还是有一些安装经验的，之前部署 Hexo 的博客用到过，所以我知道，环境嘛，不可能只会有一个版本的 Node.js 的，所以我先从 Node.js 版本管理工具下手的，经过一番探索，我选择了 pnpm 管理工具。

安装VuePress

先决条件

• Node.js v18.16.0+
• Package manager( pnpm, yarn, npm)

安装Node.js

先安装nvm，需要注意，nvm只提供了Linux版本的，对于Windows上的nvm需要另外下载（建议读完全文在进行动手实操）。 nvm：https://github.com/nvm-sh/nvm nvm-windows：https://github.com/coreybutler/nvm-windows

# 查看node.js的列表
nvm list

# 查看可用的node.js版本
nvm ls available

# 下载
nvm install 18.19.0

# 查看当前的node.js版本
nvm current

安装pnpm

中文官网：https://www.pnpm.cn/installation#using-corepack 英文官网：https://pnpm.io/installation

Windows

打开power shell，输入如下命令iwr [https://get.pnpm.io/install.ps1](https://get.pnpm.io/install.ps1) -useb | iex

PS C:\Users\demo> iwr https://get.pnpm.io/install.ps1 -useb | iex
Downloading pnpm from GitHub...

Running setup...

Copying pnpm CLI from C:\Users\demo\AppData\Local\Temp\636edd57-6fa4-4432-ad25-438703112b01\pnpm.exe to C:\Users\demo\AppData\Local\pnpm\pnpm.exe
Next configuration changes were made:
PNPM_HOME=C:\Users\demo\AppData\Local\pnpm
Path=%PNPM_HOME%;%USERPROFILE%\AppData\Local\Microsoft\WindowsApps;%NVM_HOME%;%NVM_SYMLINK%

Setup complete. Open a new terminal to start using pnpm.

需要注意的是，pnpm 同样支持下载 Node.js 使用命令 pnpm env 即可下载 Node.js，此命令只支持管理 Node.js的版本

pnpm env use --global 18.19.0

Mac

正常方式下，我们会通过先安装 Node.js（版本大于等于16.14）,然后通过 homebrew 安装 pnpm。 首先，确保系统中安装了homebrew，并确保当前的网络环境正常。

brew install node

brew install pnpm

结束。

当然，我们还提供其他方式，除了官网的方式之外，我们这里还有如下几种安装方式

脚本分析

尝试了官网的安装方式curl -fsSL [https://get.pnpm.io/install.sh](https://get.pnpm.io/install.sh) | sh - 不可行（我加了梯子的）！！

当然，新版本的pnpm是可以被正常安装的，以下步骤可以忽略。

所以我打开了file:///Users/marshio/Downloads/install.sh这个神奇的脚本，然后mv到用户目录（～），手动执行sh install.sh，经过漫长的等待后，我得到了下面的输出结果

marshio@marshiodeMacBook-Pro ~ % sh install.sh 
==> Downloading pnpm binaries 8.15.4
curl: (35) Recv failure: Operation timed out
Install Error!

然后我用编辑器打开了脚本，里面大致就是确定要下载版本号和平台以及CPU架构来确定最终的下载链接，手动拼出来就是https://github.com/pnpm/pnpm/releases/download/v8.15.4/pnpm-macos-arm64 为了避免这么麻烦，可以直接在官方Git的release中找到需要下载的东西。 然后执行如下命令

# 进入文件的下载目录
cd ~/Download

# 创建临时目录，执行完成后删除
mkdir pnpm

# 将下载的东西暂时放到～/Download/pnpm下,并重命名为pnpm
mv pnpm-macos-arm64 ./pnpm/pnpm

# 执行 SHELL="$SHELL" "$tmp_dir/pnpm" setup --force || return 1
SHELL="$SHELL" /pnpm/pnpm setup --force

# 注意，如果你碰到不能打开之类的提示，那就去mac的设置里-隐私与安全性，关闭对该文件的屏蔽

# 然后执行如下命令，然后你就能在控制台中使用pnpm啦
source /Users/marshio/.zshrc

一步脚本

之后在一篇issue中找到如下链接：curl -fsSL https://pnpm.beingthink.com/install.sh | sh -

# 输入命令并执行
marshio@marshiodeMacBook-Pro ~ % sh install.sh 
# 如下输出说明你是正确的
==> Downloading pnpm binaries 8.15.4
 WARN  using --force I sure hope you know what you are doing
Copying pnpm CLI from /private/var/folders/_4/q2v83hq179j8sb5pfqnfdvpw0000gn/T/tmp.HTY9AEQY2U/pnpm to /Users/marshio/Library/pnpm/pnpm
Created /Users/marshio/.zshrc

Next configuration changes were made:
export PNPM_HOME="/Users/marshio/Library/pnpm"
case ":$PATH:" in
  *":$PNPM_HOME:"*) ;;
  *) export PATH="$PNPM_HOME:$PATH" ;;
esac

To start using pnpm, run:
source /Users/marshio/.zshrc

# 结束后再执行一个命令
source /Users/marshio/.zshrc

综上

可以发现，我只需要下载一个pnpm即可，然后再通过命令pnpm env --global 18.19.0就完成了环境搭建的先决条件准备。 可能一些人会疑惑？那vue和vuepress呢？vue和vuepress都可以通过pnpm add添加到项目依赖，即vue和vuepress。

详细步骤

• 安装pnpm

官网的安装文档

iwr https://get.pnpm.io/install.ps1 -useb | iex

• 通过pnpm env 安装Node.js

pnpm env use --global 18.19.0

• 在本地创建项目目录/demo.github.io
• 初始化（git、pnpm）

D:\Code\MS\imarshio.github.io>git init
Initialized empty Git repository in D:/Code/MS/imarshio.github.io/.git/

D:\Code\MS\imarshio.github.io>pnpm init
Wrote to D:\Code\MS\imarshio.github.io\package.json

{
  "name": "imarshio.github.io",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo Error: no test specified && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

• 添加相关依赖

# 
pnpm add -D vuepress@next @vuepress/client@next vue

• 创建一个目录

在项目目录下创建一个你想要的文件名，用于存储未来的博客文档，然后在这个目录下创建一个文档READMD.md，里面随便写入一些字符

• 添加启动脚本

{
  "name": "imarshio.github.io",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    // 在这里添加如下两行启动脚本
    "blogs-dev": "vuepress dev blogs",
    "blogs-build": "vuepress build blogs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vuepress/client": "2.0.0-rc.0",
    "vue": "^3.4.5",
    "vuepress": "2.0.0-rc.0"
  }
}

• 启动

pnpm blogs-dev

在浏览器输入http://localhost:8080/ 如果你能看到你输入的字符就代表大功告成。

主题选择

VuePress有多种主题可以选择，默认的主题也是不错的，但是！！作为博客，还是要炫酷一点，毕竟不是简单的分享那么简单。

经过一段时间的选择，我决定使用vuepress-theme-Hope。

搭建

建议参考：Get Started

大部分配置都可以在官方文档中找到，所以遇到问题的时候建议多翻翻官方文档。

其他参考

Git多用户配置

一般公司（不是一般公司，而是一般~公司）都会搭建内部的Git、Gitlab仓库，这时候，你的账户自然不会和Github上的通用。

这时候，如果你想在公司电脑上也能推到github上，那么你可能需要参考下Git多用户配置。

fontawesome

传送门

Good luck。