vuepress——创建个人博客（亲测可行）

深藏阁楼爱情的钟 2022-10-09 06:29 523阅读 0赞

> 作为一个前端工程师，个人博客是一个很好的展示自己的形式。

之前在学习前端的过程中，也有老师讲过搭建个人博客，但是当时我记得是有用到后端的知识，而且搭建的博客页面布局需要自行创建。我懒，所以一直都没有动手操作。

前一段时间发现了黄河爱浪大神有个自己的博客，页面布局看上去跟vue页面非常相似。漂亮大气……

最终效果图如下：是不是跟vue的页面很相似……  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
于是我找到了相关的创建博客的办法就是`vuepress`

我花了两天的空余时间，才整好自己的个人博客。因为对github不是很熟悉，所以中间出现了失败的情况。

下面就针对使用`vuepress`创建个人博客总结一下注意事项

以下的很多内容都是摘自大神：

附上大神的链接：[大神的个人博客：http://www.zhangyunchen.cc/][http_www.zhangyunchen.cc]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

## 三、vuepress搭建步骤 ##

大家可以根据链接中的操作步骤来操作，也可以直接下载大神的代码，然后进行相应的修改：

如果要自行创建，则需要进行下面的步骤：

#### 1.创建项目文件夹 ####

可以右键手动新建，也可以使用 mkdir 命令新建：

mkdir vuepressBlogDemo

#### 2.全局安装vuepress ####

npm install -g vuepress

#### 3.进入 vuepressBlogDemo 文件夹，初始化项目 ####

使用 `npm init` 或 `npm init -y`（默认yes）

npm init -y

#### 4.创建文件夹和文件 ####

在 vuepressBlogDemo 文件夹中创建 docs 文件夹，在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，最终项目结构如下所示：

vuepressBlogDemo
    ├─── docs
    │   ├── README.md
    │   └── .vuepress
    │       ├── public
    │       └── config.js
    └── package.json

我创建的目录结构如下：  
除了上面提到的文件夹之外，还有其他的`about` `browser` `elementUi` `jquery` `vue`都是我要展示的内容部分，注意名称最好是英文，因为要展示到地址栏，有中文会不太好看。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]

#### 5.config文件配置 ####

在 `config.js` 文件中配置网站标题、描述、主题等信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]

module.exports = { 
        title: '个人主页',
        description: 'xxx的博客',
        head: [ // 注入到当前页面的 HTML <head> 中的标签
            ['link', {  rel: 'icon', href: '/images/photo.jpg' }],
            ['link', {  rel: 'manifest', href: '/manifest.json' }],
            ['link', {  rel: 'apple-touch-icon', href: '/images/photo.jpg' }],
            ['meta', {  'http-quiv': 'pragma', cotent: 'no-cache' }],
            ['meta', {  'http-quiv': 'pragma', cotent: 'no-cache,must-revalidate' }],
            ['meta', {  'http-quiv': 'expires', cotent: '0' }]
        ],
        serviceWorker: true, // 是否开启 PWA
        base: '/', // 部署到github相关的配置
        markdown: { 
            lineNumbers: true // 代码块是否显示行号
        },
        themeConfig: { 
            nav: [
                {  text: '主页', link: '/' },
                { 
                    text: '博文',
                    items: [
                        {  text: 'ElementUi', link: '/elementUi/' },
                        {  text: 'Jquery', link: '/jquery/' },
                        {  text: 'Vue', link: '/vue/' },
                        {  text: '浏览器', link: '/browser/' },
                    ]
                },
                {  text: '关于', link: '/about/' },
                {  text: 'Github', link: 'https://github.com/xxx' },
                {  text: 'CSDN', link: 'https://xxx' },
            ],
            sidebar: { 
                '/jquery/': [{ 
                    title: 'jquery',
                    collapsable: true,
                    children: [
                        '/jquery/recursion'
                    ]
                }],
                '/browser/': [{ 
                    title: '浏览器默认行为',
                    collapsable: true,
                    children: [
                        '/browser/default'
                    ]
                }],
                '/vue/': [{ 
                    title: 'vue默认行为',
                    collapsable: true,
                    children: [
                        '/vue/default'
                    ]
                }],
                '/elementUi/': [{ 
                        title: '级联选择器',
                        collapsable: true,
                        children: [
                            '/elementUi/cascader'
                        ]
                    },
                    { 
                        title: '下拉选择器',
                        collapsable: false,
                        children: [
                            '/elementUi/select',
                        ]
                    },
                ]
            },
            sidebarDepth: 2,
            lastUpdated: 'Last Updated'
        }
    };

#### 5. package.json文件配置 ####

在 `package.json` 文件里添加启动命令

"scripts": { 
            "start": "vuepress dev docs",
            "dev": "vuepress dev docs",
            "build": "vuepress build docs",
            "deploy": "bash deploy.sh" //后面这个是一个deploy.sh的文件，我这边用npm run deploy时一直报错，因此后面就没有用到，后面上传代码到github,都是手动上传的。。。
        },

#### 6. public文件夹中的manifest.json文件配置 ####

{ 
        "name": "xxx",
        "short_name": "xxx",
        "start_url": "index.html",
        "display": "standalone",
        "background_color": "#2196f3",
        "description": "xxx的个人主页",
        "theme_color": "blue",
        "icons": [{ 
            "src": "./images/hero.jpg",  //这个就是首页中的头像部分，主要路径
            "sizes": "144x144",
            "type": "image/jpeg"
        }],
        "related_applications": [{ 
                "platform": "chrome_web_store"
            },
            { 
                "platform": "play",
                "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
            }
        ]
    }

#### 7. npm run dev运行项目 ####

#### 8. 部署到服务器 ####

我没有自己的服务器，有两个免费部署方法，一个是部署到`github`上，一个是部署到`gitee`上，但是目前`gitee`好像要整改，最近几个月是无法进行部署到码云上的，因此选择部署到`github`上。。。

`gitee`码云有个`gitee pages`服务，可以将内容部署到页面上。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]  
还可以部署到`github pages`上面：  
![在这里插入图片描述][20210624133331649.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 10]  
由于我这边实际操作时，`npm run depoy`一直提示我`bash 不是批处理文件`，导致一直部署失败，我的解决办法就是手动执行 `deploy.sh`文件中的内容。

步骤如下：

> 1.  `npm run build`
> 2.  `cd docs\.vuepress\dist` 具体的路径根据实际情况来
> 3.  `git init`
> 4.  `git add .`
> 5.  `git commit -m "xxxxx"`
> 6.  `git push -f git@github.com:xxxx/xxxx.github.io.git master`

注意上面最后一行中的`xxxx`就是你的`githhub`名称。

完成！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221005/1a6cfa8b5d8a43e6b0ef7b12cb94ceca.png
[http_www.zhangyunchen.cc]: http://www.zhangyunchen.cc/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221005/3f2a71f8b5cd4e8c94a3fb33e93531d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20221005/009ac4423bac4a63b4a19b413c4f5ff0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20221005/994abe4d25e74400b986a25e21276b8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20221005/9306599dccc14249b39f9f31c82caf35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20221005/aff15cc7728f41089da3658fdea5faaf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]: /images/20221005/b4eb8d2859f348f5be1066338719d852.png
[20210624133331649.png]: /images/20221005/a68c83bf40b2449e891fb08799649bf3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]: /images/20221005/3ae9cdf2d69a4457979a0dcb0de7242c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]: /images/20221005/a6cd19f52b6c4379bbb5d4fe56cf81fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 9]: /images/20221005/4705b85229cd42d6af31f0e34706c7a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 10]: /images/20221005/7ab744b896b34eeca20c5d84a26ab16d.png