我的博客网站搭建

我的博客网站搭建

VuePress介绍

本人的我的博客网站，网站地址，是基于VuePress进行搭建。

什么是VuePress

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

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

VuePress 工做原理

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

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

快速开始

前置条件

一、在开始以前咱们须要确保你的本地是由nodejs的环境，咱们先来验证一下，
打开的命令行工具，个人是mac因此打开的终端（Windows打开cmd），输入一下命令：

node -v

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

二、接着咱们来验证是否有npm工具：

npm -v

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

一、下载nodejs

登陆nodejs官网：nodejs官网

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

正式开始

一、建立目录

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

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

二、初始化目录

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

根据提示设置一些必要的信息，无需设置直接回车，最后输入yes，设置完成后，以下图所示：

此时，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"
}

能够看到，就是咱们刚才设置的一些信息。

三、安装VuePress

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

也能够进行全局安装

npm install -g vuepress

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

安装完成后能够看到项目下多了一个目录node——modules，这里都是咱们须要依赖的文件。

四、建立你的博客相关目录

在blog_web目录下建立一个docs目录，进入docs目录建立.vuepress目录，
建立一个README.md文件，涉及的命令以下：

mkdir docs

cd docs

mkdir .vuepress

五、配置网站头

进入.vuepress目录下建立，config.js文件，配置如下信息

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

六、配置网站首页

进入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: 关注微信公众号【北漂码农有话说】，众多技术呈现给你！

---

七、启动项目

进入到blog_web目录，加入以下脚本

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

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

npm run dev

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

进行访问http://localhost:8080/

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

持续优化

一、配置网站角标

如今网站的头部很单调，咱们须要进行优化

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

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'}],
    ],
}

二、配置网站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

三、查看网站效果

首页

java

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

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

小结

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

GitHub