我的博客網站搭建

我的博客網站搭建

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