{ do something }

如何搭建一个博客

首先要安装一些必要的软件

安装命令行工具（command）

安装 Git

安装 Node.js

  • 打开 Node.js 下载地址：http://nodejs.cn/
  • MacOS 安装64位的.pkg包，Windows安装.msi包，选择32位还是64位可以看：百度经验
  • 在命令行输入：node -v 如果输出以下内容代表 Node.js 安装完好：
node -v
v14.17.5 // <-- 这里的版本号应该是你安装的那个
1
2

安装 VSCode

接下来我们开始创建项目

创建一个工作空间

  • 以后我们会把自己的代码都放在一个文件目录下方便管理，因此可以选择一个你喜欢的地方
  • 首先介绍一下cd命令：百度经验
  • 然后介绍一下mkdir命令：https://www.runoob.com/（PS：文档中方括号内的参数代表可选参数）
  • 以后遇到不认识的命令都可以在：Linux 命令大全查找
  • 找好目录之后，我们开始创建项目：
mkdir blog
cd blog
git init
npm init
1
2
3
4

  • 以上4个命令分别代表：

    1. 创建一个叫blog的文件夹
    2. 进入blog文件夹
    3. 初始化git（后面部署时会用到）
    4. 初始化npm，会在blog目录下生成package.json

  • 在输入npm init之后，命令行会进入提示阶段，可以给项目起一个任意的name，然后一路回车即可

使用 VuePress（next版本）

  • 打开vuepress文档：https://v2.vuepress.vuejs.org/
  • 我们从手动安装的步骤3开始一直往下，就可以在本地启动我们的博客项目了
  • 注：package.json是一个json类型的文件，需要满足其格式约束，你可以把内容粘贴到：https://jsonlint.com/ 来验证内容格式的正确性

添加主题

  • 下载主题：
npm install @calibur/vuepress-theme-eva
1
  • 创建配置文件：
touch vuepress.config.ts
1
type nul > vuepress.config.ts
1
  • 写入配置文件到vuepress.config.ts：
import { defineUserConfig } from 'vuepress'
import type { DefaultThemeOptions } from 'vuepress'

export default defineUserConfig<DefaultThemeOptions>({
    theme: '@calibur/eva',
    title: '博客标题',
    themeConfig: {
        author: '你的名字'
    }
})
1
2
3
4
5
6
7
8
9
10
  • 重启博客
ctrl + c
npm run docs:dev
1
2
  • 这个时候你会发现之前能展示的README.md无法展示了，那是因为这个主题默认不展示README.md，但你也不能删除它，我们可以创建其他文件来写博客
  • 你可以在README.md同级目录下，创建任意文件名.md来写新的博文，重启博客就可以看到了
  • 有关markdown语法参见：markdown手册
  • 在md文件顶部为页面设置标题、描述等信息：frontmatter手册，如：
---
title: 页面的标题
description: 页面的描述
---
1
2
3
4

将本地代码提交到远端

git remote add origin git@github.com:你的github昵称/你的github昵称.github.io.git
git status
git add -A
git commit -m "first push"
git push origin master
1
2
3
4
5

创建自动化发布流程

  • 添加自动化部署脚本：https://v2.vuepress.vuejs.org/

  • 需要注意的是：

    1. 我们的代码默认分支是在master，上面文档中的配置样例第6行指定的是main分支，所以要把main改成master
    2. 配置样例第44行执行的脚本是yarn docs:build，和我们的npm run docs:build是一样的效果，无需修改

  • 配置github pages发布源：https://docs.github.com/，将分支改为：gh-pages，目录为：/(root)

  • 配置完成后，以后每当本地提交代码，git 都会自动更新你的修改到个人博客站点

© 2021冰淤