Cyan Blog
2025-01-17
0
0
目录

从零开始搭建博客

# 本地搭建

本站使用VuePress+GithubPage搭建

环境准备

  • 需要先安装Node.js
  • Chrome浏览器或FireFox浏览器
  • 一台电脑（Windows）
  1. 创建并进入一个新目录

​ 在命令行中创建并进入新目录 vuepress-starter（可以自定义名字）：

cd vuepress-starter
  1. 使用npm（node包管理器）进行初始化（-y可以自动确认问题）
npm init  -y
  1. 将 VuePress 安装为本地依赖
 npm install -D vuepress

  1. 创建你的第一篇文档

    VuePress 会以 docs 为文档根目录，所以README.md 相当于主页：

​ 创建 docs 目录，并在其中创建 README.md 文件作为首页内容：

mkdir docs
echo '# Hello VuePress' > docs/README.md
  1. 修改 package.json 文件，添加一些启动命令：
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }

  • 这样做的好处是你可以通过简单的命令来运行开发服务器或构建生产版本的静态文件，比如：

    • 启动本地开发服务器：npm run docs:dev

    • 构建用于部署的静态文件：npm run docs:build

  1. 测试本地环境
npm run docs:dev
  1. 运行编译成功后，会有提示：

image-20250116215750272

  1. 在浏览器打开这个shell窗口中的网址 http://localhost:8081（默认端口是8080，可能我的端口被占用了），可以看到如下内容：

image-20250116220142153

# 优化

# 配置首页

现在的页面太简单了，我们可以对项目首页进行配置，修改 docs/README.md ：

home: true
heroImage: https://s3.bmp.ovh/imgs/2022/12/02/bc7428e3916c3a4c.jpg
heroText: Hero标题
tagline: Hero副标题
actionText: 快速上手→
actionLink: /README.md
features:

- title: 简洁至上
  details: 以Markdown为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受Vue+ webpack 的开发体验，在Markdown中使用Vue组件，同时可以使用Vue来开发自定义主题。
- title: 高性能
  details: VuePress为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
  footer: 粤ICP备2022067627号-1  粤公网安备 44011302003646号

以上内容使用 yaml 语法，读者修改的时候注意不要违反了 yaml 语法规则。

# 热更新

什么是热更新：如果我们已经运行了本项目，在我们修改文档时候，VuePress 能自动更新博客，不用重新运行也能看到修改后的博客的内容（相当于会自动编译运行，不用我们手工编译运行了）。

VuePress 本身是支持热更新的，但是有 bug……有时候会热更新失败

因此，想要做到热更新，得修改下package.js中的命令，添加一个临时目录：

"docs:dev": "vuepress dev docs --temp .temp"

由于该临时目录只用于解决热更新失败的问题，我们在 .gitignore 也添加一条忽略的规则：

.temp

注意，我们修改了 package.json 文件，得重新运行本项目。

在后续的使用过程中，一般文档内容等会自动更新，但如果有修改什么配置文件，可能得重启；

# 导航栏配置

接下来我们来配置下导航栏。

新建 docs/.vuepress/config.js 配置文件，文件内容如下：

module.exports = {
  title: 'TypeScript4 文档',
  description: 'TypeScript4 最新官方文档翻译',
  head: [
    ['link', { rel: 'icon', href: 'https://s3.bmp.ovh/imgs/2023/02/15/16aa54f3ee84602e.webp' }]
  ],
  themeConfig: {
  	subSidebar: 'auto',
    logo: 'https://s3.bmp.ovh/imgs/2022/12/02/bc7428e3916c3a4c.jpg',
    nav: [
      { text: '首页', link: '/' },
      { 
          text: '西螈的 JavaScript 博客', 
          items: [
              { text: 'Github', link: 'https://github.com/cyanyep' },
              { text: 'CSDN', link: 'https://blog.csdn.net/rc4gyyc' }
          ]
      }
    ]
  }
}

# 静态资源

有时候，一些图片是经常被用到的，我们可以将其放到一个公共文件夹里，这样就可以在不同的博客里都引用到了。

我们在 .vuepress 目录下新建 public 目录，然后放一个图片，例如 amiliya.jpg。此时文件夹目录结构如下：

vuepress-learn
├── .temp
├── docs
│   ├── .vuepress
│   │   ├── public
│   │   │   └── amiliya.jpg
│   │   └── config.js
│   ├── Basic
│   │   ├── Basic1.md
│   │   └── Basic2.md
│   ├── Java
│   │   ├── JavaEE.md
│   │   └── JavaSE.md
│   └── README.md
├── package-lock.json
└── package.json

然后我们就可以在博客或配置文件里引用了。例如在 Basic1.md 里引用：

# Basic1

![](/amiliya.jpg)

这里是计算机基础第一课！

又或者在配置文件里访问图片：

module.exports = {
  themeConfig: {
    logo: '/re0.jpg',
  }
}

# 主题

我们之前想要增加侧边栏，需要一个个配置链接，才能让侧边栏展示成我们想要的效果，非常麻烦；有时候我们还想要加载 loading、切换动画、返回顶部、评论等功能，都自己开发的话太麻烦了。

本博客就是使用了 vdoing 主题 (opens new window) (opens new window)，能自动生成侧边栏、标题和目录页等等功能，非常方便。本文就以 vdoing 主题为例，演示如何使用一个主题（建议读者先简单看一下该主题的文档，或者等看完本博客后再看也行）。

# 博客准备

由于 vdoing 主题对于 Markdown 文件和文件夹的命名有要求（需要在其前面用梳子编号），我们同步修改下。修改后目录结果如下：

vuepress-learn
├── docs
│   ├── .vuepress
│   │   ├── public
│   │   │   └── amiliya.jpg
│   │   └── config.js
│   ├── 01.Basic
│   │   ├── 01.Basic1.md
│   │   └── 02.Basic2.md
│   ├── 02.Java
│   │   ├── 01.JavaEE.md
│   │   └── 02.JavaSE.md
│   └── README.md
├── package-lock.json
└── package.json

# 安装

其实主题也就是一个 npm 包，可以通过 npm 的方式下载。

npm install vuepress-theme-vdoing -D

在 config.js 里配置使用主题（第 6 行）：

module.exports = {
  title: 'TypeScript4 文档',
  description: 'TypeScript4 最新官方文档翻译',
  head: [
    ['link', { rel: 'icon', href: 'https://s3.bmp.ovh/imgs/2023/02/15/16aa54f3ee84602e.webp' }]
  ],
  base: '/',
  theme: 'vdoing', 
  locales: {
    '/': {
      lang: 'zh-CN'
    }
  },
  themeConfig: {
    logo: 'https://s3.bmp.ovh/imgs/2022/12/02/bc7428e3916c3a4c.jpg',
    nav: [
      { text: '首页', link: '/' },
      { 
          text: '西螈的 JavaScript 博客', 
          items: [
              { text: 'Github', link: 'https://github.com/cyanyep' },
              { text: 'CSDN', link: 'https://blog.csdn.net/rc4gyyc' }
          ]
      }
    ],
    sidebar: 'structuring'
  }
}

‍

# 自动生成 front matter

如果 Markdown 文件里没有配置 yaml，那么 vdoing 主题会自动为每个文档添加 front matter（1~9 行），以 01.JavaSE.md 为例：

---
title: JavaSE
date: 2023-02-16 07:47:56
permalink: /pages/f9c28a/
categories:
  - Java
tags:
  - 
---
这里是JavaSE



## 这是二级标题！

### 这是三级标题！


## 这是第二个二级标题！

这些配置的说明如下：

  • title：标题，.md 文件的名称
  • date：当前页面的创建时间
  • permalink：当前页面的永久链接，例如访问上述文件时，使用的链接是：http://localhost:8080/pages/f9c28a/，不太好记，可以修改为好记一点的 /JavaSE。
  • categories：文章的分类，默认是 .md 所在的文件夹名称。
  • tags：文章的标签

注意事项

  • permalink不能使用中文，否则通过路径访问文章会失效

# 插件

# vuepress-plugin-code-copy

vuepress-plugin-code-copy 插件用于给代码块增加复制按钮。

例如我们在 Markdown 文档里加一个代码块，非常简单，没有复制按钮：

安装：

npm i vuepress-plugin-code-copy

然后修改 config.js：

module.exports = {
    .....
  themeConfig: {
    ....
  },

  plugins: [
    ['vuepress-plugin-code-copy', true],  //复制代码块的插件
  ]
}

# reading-progress

reading-progress 是一个显示阅读进度条的插件。

安装：

npm i vuepress-plugin-reading-progress

在 config.js 里配置

 plugins: [

    ['vuepress-plugin-code-copy', true],  //复制代码块的插件
  
    'reading-progress',

  ]

# cursor-effects

修改光标效果的插件。简单来说就是在鼠标单击的时候，加个烟花效果

安装：

npm i vuepress-plugin-cursor-effects

配置：

  plugins: [
    ['vuepress-plugin-code-copy', true],  //复制代码块的插件
  
    'reading-progress',

    'cursor-effects', {
      size: 2, // size of the particle, default: 2
      shape: 'star', // ['star' | 'circle'], // shape of the particle, default: 'star'
      zIndex: 999999999, // z-index property of the canvas, default: 999999999
    },
  ]

# vuepress-plugin-dynamic-title

当用户离开和进入你的网站时，浏览器标签页的图标会变化。

安装：

npm i vuepress-plugin-dynamic-title

配置：

  plugins: [
    ['vuepress-plugin-code-copy', true],  //复制代码块的插件
  
    'reading-progress',

    'cursor-effects', {
      size: 2, // size of the particle, default: 2
      shape: 'star', // ['star' | 'circle'], // shape of the particle, default: 'star'
      zIndex: 999999999, // z-index property of the canvas, default: 999999999
    },

    //网站动态标题
    'dynamic-title', {
      // showIcon: '',
      showText: '欢迎回来  O(∩_∩)O~~',
      // hideIcon: '',
      hideText: '等等，你别走啊 ::>_<::',
      recoverTime: 2000,
    }
  ]

# 部署

我们的博客就算是正式的做好了，接下来我们部署到免费的 Github Pages 上。我们在 Github 上新建一个仓库，这里我取得仓库名为：cyanyep，（因为后面我还创建了blog-img,blog-code，为了统一分类，我在后面把仓库名改为了blog-pages，你们也可以直接改为这个名字）。

对应，我们需要在 config.js 添加一个 base 路径配置：

module.exports = {
  	// 路径名为 "/<REPO>/"
    base: '/cyanyep/',
  	//...
}

最终的 config.js 文件内容为：

module.exports = {
  title: 'TypeScript4 文档',
  description: 'TypeScript4 最新官方文档翻译',
  head: [
    ['link', { rel: 'icon', href: 'http://stofu80ry.sabkt.gdipper.com/picture/mmexport1689155413427.png' }]
  ],
  base: '/cyanyep/',
  theme: 'vdoing', 
  locales: {
    '/': {
      lang: 'zh-CN'
    }
  },
  themeConfig: {
	subSidebar: 'auto',
    logo: 'http://stofu80ry.sabkt.gdipper.com/picture/mmexport1689155413427.png',
      nav: [
        { text: '首页', link: '/' },
        { 
            text: '西螈的 JavaScript 博客', 
            items: [
                { text: 'Github', link: 'https://github.com/cyanyep' },
                { text: 'CSDN', link: 'https://blog.csdn.net/rc4gyyc' }
            ]
        }
      ],
      sidebar: [
        {
            title: '欢迎学习',
            path: '/',
            collapsable: false, // 不折叠
            children: [
                { title: "学前必读", path: "/" }
            ]
        },
        {
          title: "个人博客网站搭建",
          path: '/Blog/build',
          collapsable: false, // 不折叠
          children: [
            { title: "搭建个人博客网站", 
              author: "西螈", 
              date: "2024-12-12", 
              path: "/Blog/build" }
          ],
        }
      ]
    }
}

然后我们在项目 vuepress-starter 目录下建立一个脚本文件：deploy.sh，注意修改一下对应的用户名和仓库名：

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:cyanyep/cyanyep.git master:cy-pages

cd -

然后命令行切换到 vuepress-starter 目录下，执行 sh deploy.sh，就会开始构建，然后提交到远程仓库，注意这里提交到了 cy-pages 分支，我们查看下对应仓库分支的代码：

我们可以在仓库的 Settings -> Pages 中看到最后的地址：cyanyep.github.io/cyanyep

至此，我们完成了 VuePress 和 Github Pages 的部署。

你就可以使用有最基本功能的个人博客网站。

参考： 从零开始搭建博客系列 | 从 01 开始 (opens new window)

VuePress 博客搭建系列 33 篇正式完结！ (opens new window)

上次更新: 2025/4/3 11:03:46
零成本搭建个人博客网站
更多配置

← 更多配置→

最近更新
01
项目优化
05-06
02
项目优化
05-06
03
延迟消息
05-05
更多文章>
Theme by Vdoing | Copyright © 2025-2025 Cyan Blog