是时候来一个个人博客网站了

秒速五厘米 2023-10-06 13:21 38阅读 0赞

### VuePress介绍 ###

本人的个人博客网站,[网站地址][Link 1]，是基于VuePress进行搭建。

#### 什么是VuePress ####

根据官网：`VuePress` 由两部分组成：第一部分是一个极简静态网站生成器，  
它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，  
它的诞生初衷是为了支持 Vue 及其子项目的文档需求。每一个由 `VuePress` 生成的页面都带有预渲染好的 HTML，  
也因此具有非常好的加载性能和搜索引擎优化（SEO）。

同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），  
其他的页面则会只在用户浏览到的时候才按需加载。

#### VuePress 工作原理 ####

事实上，一个 `VuePress` 网站是一个由 `Vue`、`Vue Router` 和 `webpack`驱动的单页应用。  
如果你以前使用过 `Vue` 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，  
你甚至可以使用 `Vue DevTools` 去调试你的自定义主题。

在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，  
然后通过虚拟访问每一条路径来渲染对应的HTML。

### 快速开始 ###

#### 前置条件 ####

1、在开始之前我们需要确保你的本地是由nodejs的环境，我们先来验证一下，  
打开的命令行工具，我的是mac所以打开的终端（Windows打开cmd），输入一下命令：

node -v

![format_png][]

> 说明：出现版本号，说明你本地是有环境。

2、接着我们来验证是否有npm工具：

npm -v

![format_png 1][]

如果有的小伙伴没有相关环境：请按如下提示进行环境准备

1、下载`nodejs`

![format_png 2][]

> 下载符合你个人系统的软件，进行安装，安装过程很简单，这里就不过多赘述。  
> 安装完成后，继续上面所说的进行验证node的版本和npm的版本

#### 正式开始 ####

1、创建目录

在你的终端执行进行入的放放置项目的目录，创建一个目录，如下命令：

// 进入一个目录
    cd 你的目录
    //创建一个 blog_web 目录
    mdkir blog_web

2、初始化目录

//进入 blog_web
    cd blog_web
    //初始化目录
    npm init -y

根据提示设置一些必要的信息，无需设置直接回车，最后输入`yes`，设置完成后，如下图所示：  
![format_png 3][]

此时，blog\_web目录先会有一个`package.json`文件,打开文件看一下有什么信息。

//编辑文件
    vi packag.json

{
        
      "name": "blog_web",
      "version": "1.0.0",
      "description": "我的博客网站",
      "main": "index.js",
      "scripts": {
        
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "北漂码农有话说",
      "license": "ISC"
    }

可以看到，就是我们刚才设置的一些信息。

3、安装`VuePress`

//安装在你的目录下
    npm install -D vuepress

也可以进行全局安装

npm install -g vuepress

全局安装以后在任何目录下都可以使用`VuePress`

安装完成后可以看到项目下多了一个目录`node——modules`，这里都是我们需要依赖的文件。  
![format_png 4][]

4、创建你的博客相关目录

在blog\_web目录下创建一个`docs`目录，进入`docs`目录创建`.vuepress`目录，  
创建一个`README.md`文件，涉及的命令如下：

mkdir docs
    
    cd docs
    
    mkdir .vuepress

5、配置网站头

进入`.vuepress`目录下创建，`config.js`文件，配置以下信息

module.exports = {
        
        title: '北漂码农优化说',
        description: '欢迎来到我的博客'
    }

6、配置网站首页

进入`docs`目录，打开`README.md`文件，配置如下内容：

---
    home: true
    heroImage: http://cdn.triumphxx.com.cn/img/%E9%A1%B5%E5%A4%B4.jpg
    heroText: 北漂码农有话说
    tagline: Java 全栈技术交流平台
    actionText: 开始学习 →
    actionLink: /
    features:
    - title: 纯原创
      details: 不做互联网的搬运工，我们踏实搞技术。
    - title: 成系列
      details: 成系列的教程合集，告别碎片化学习，Java 学习一步到位！
    - title: 有案例
      details: 文章都有配套案例，搜索微信公众号【北漂码农有话说】，及时获取文档更新通知！
    footer: 关注微信公众号【北漂码农有话说】，众多技术呈现给你！
    
    ---

7、启动项目

进入到`blog_web`目录，加入如下脚本

"scripts": {
        
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "vuepress dev docs",
        "build": "vuepress build docs"
     }

在终端执行如下命令，启动项目：

npm run dev

出现如下信息说明启动成功

![format_png 5][]

进行访问[http://localhost:8080/][http_localhost_8080]

![format_png 6][]

出现上面的画面，那么恭喜你，你想网站已经启动成功。

#### 持续优化 ####

1、配置网站角标

现在网站的头部很单调，我们需要进行优化

进入`.vuepress`目录下，在`config.js`文件下设置`hand`的信息，如下：

2、配置网站`logo`、导航栏、侧边栏

进入`.vuepress`目录下，在`config.js`文件下信息，如下：

module.exports = {
        
        title: '北漂码农有话说',
        description: '欢迎来到我的博客',
        head: [
            ['link', {
        rel: 'icon', href: 'http://cdn.triumphxx.com.cn/img/%E5%85%AC%E4%BC%97%E5%8F%B71.jpeg'}],
        ],
        themeConfig: {
        
            logo: 'http://cdn.triumphxx.com.cn/img/%E5%85%AC%E4%BC%97%E5%8F%B71.jpeg',
            nav: [
                {
        text: '首页', link: '/'},
                {
        text: 'Java', link: '/java/'},
                {
        text: '前端', link: '/web/'},
                {
        text: 'GitHub', link: 'https://github.com/triumphxx'}
            ],
            sidebar: {
        
                '/java/': [
                    '',
                    'java1',
                    'java2'
                ],
    
                '/web/': [
                    '',
                    'web',
                ]
            }
        }
    }

配置完成后，需要在`docs`目录先创建`java`目录，并且在`java`目录下创建，`READNE.md`、  
`java1.md`、`java2.md`文件，同理创建`web`目录。项目目录结构图如下：

.
    ├── docs
    │   ├── README.md
    │   ├── java
    │   │   ├── README.md
    │   │   ├── java1.md
    │   │   └── java2.md
    │   └── web
    │       ├── README.md
    │       └── web.md
    ├── package-lock.json
    ├── package.json
    └── tree.txt

3、查看网站效果

首页

![format_png 7][]

**java**

找一篇文章我们看一下效果

![format_png 8][]

这样我们的静态博客网站就搭建完成了

### 小结 ###

好啦，小伙伴们，到此我们的静态博客网站就基本搭建完成了。至于如何部署上线，微信搜一搜【北漂码农有话说】  
我们下回分享。

[GitHub][]

![format_png 9][]

[Link 1]: http://blog.triumphxx.com.cn/
[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL2Nkbi50cml1bXBoeHguY29tLmNuL2ltZy9ub2RlLXYucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL2Nkbi50cml1bXBoeHguY29tLmNuL2ltZy9ucG0tdi5wbmc?x-oss-process=image/format,png
[nodejs]: https://nodejs.org/en/
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL2Nkbi50cml1bXBoeHguY29tLmNuL2ltZy9ub2RlLSVFNSVBRSU5OCVFNyVCRCU5MS5wbmc?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cDovL2Nkbi50cml1bXBoeHguY29tLmNuL2ltZy9ucG0taW5pdC5wbmc?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cDovL2Nkbi50cml1bXBoeHguY29tLmNuL2ltZy9ub2RlX21vZHVsZXMucG5n?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cDovL2Nkbi50cml1bXBoeHguY29tLmNuL2ltZy9ucG1fcnVuX2Rldi5wbmc?x-oss-process=image/format,png
[http_localhost_8080]: http://localhost:8080/
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cDovL2Nkbi50cml1bXBoeHguY29tLmNuL2ltZy8lRTUlOEQlOUElRTUlQUUlQTIlRTUlOTAlQUYlRTUlOEElQTglRTYlODglOTAlRTUlOEElOUYucG5n?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cDovL2Nkbi50cml1bXBoeHguY29tLmNuL2ltZy93ZWJfaW5kZXgucG5n?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cDovL2Nkbi50cml1bXBoeHguY29tLmNuL2ltZy9ibG9nLWphdmEucG5n?x-oss-process=image/format,png
[GitHub]: https://github.com/triumphxx/blog_web
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cDovL2Nkbi50cml1bXBoeHguY29tLmNuL2ltZy8lRTYlODklQUIlRTclQTAlODFfJUU2JTkwJTlDJUU3JUI0JUEyJUU4JTgxJTk0JUU1JTkwJTg4JUU0JUJDJUEwJUU2JTkyJUFEJUU2JUEwJUI3JUU1JUJDJThGLSVFNiVBMCU4NyVFNSU4NyU4NiVFOCU4OSVCMiVFNyU4OSU4OC5wbmc?x-oss-process=image/format,png