「奇怪的教程」年輕人的第一個博客搭建指南

開始前要說的話

當你有意識想要爲本身搭建一個我的博客時，我相信你已經步入了開發者這扇門，也許你的技術沒有很是強勁，或者你和我同樣對於前端技術瞭解的不多，你在接下來的搭建過程當中可能會出現一些問題，這些問題頗有可能沒有徹底的記錄在個人教程中，可是請必定要記得：

::: tip

碰見了問題請不要抱怨，嘗試本身解決他，利用你的翻譯軟件和搜索軟件，找到問題的關鍵，處理它，本身動手把坑填上 ：）

:::

用到的技術和知識

vuepress：基於Markdown的前端網站生成器，awesome，簡單易用，不須要掌握太多前端技術也能夠快速搭建

vuepress-theme-hope：一個具備強大功能的 vuepress 主題，封裝好了不少功能，即便前端不是很熟悉，也能夠快速上手

markdown語法：這個網上教程不少，語法也很簡單，本文也是使用markdown進行撰寫的，這個必需要了解

官方文檔

最好的教程固然是官方文檔

quickstart

安裝nodejs

下載nodejs，要求版本大於8.6，傻瓜式安裝，一路next

# 測試安裝是否成功
# 若是win10環境提示無此命令，先檢查環境變量中nodejs命令的路徑是否正常，而後嘗試重啓電腦
node -v
npm -v
# 正常輸出表明安裝成功

helloworld

# 選擇一個合適的路徑，建立並進入一個新目錄
mkdir vuepress-starter && cd vuepress-starter

# 初始化項目，-y會自動幫你生成好相關內容
# npm不太懂不要緊，咱們的重心不在這，大體理解就是咱們的項目基於npm運行，這一步是初始化
npm init -y 

# 安裝vuepress
# 若是你的環境安裝正確
# 這一步結束你會發現給你的目錄生成了一些文件
# 不要慌，如今你能夠不知道這些文件和目錄的做用
npm install -D vuepress

# 建立docs目錄
# 須要你記住的是
# docs簡單理解就是放你各類工做文件的地方，相似於java的src目錄
右擊在當前目錄新建一個docs文件夾 or mkdir docs

# 進入docs，新建一個README.md文件
# 在你的README.md中寫上: # Hello World!

# 修改你主目錄的package.json文件，設置你的啓動命令
# 你能夠不配置，可是我推薦你這麼作，由於配置了這是能少打幾個字，方便點
# 找到scripts，不要動裏面的其餘東西，往裏面加兩行
"dev": "vuepress dev docs",
"build": "vuepress build docs"

# 而後啓動！
npm run dev

# 等待啓動完成，你的終端會給你一個提示，讓你訪問localhost:8080
# Hello World !

目錄結構

如今你已經嘗試過了Hello World，但這遠遠還不夠，想要更深一步去搭建一個炫酷的博客，你還須要知道vuepress的目錄結構

不然你沒法繼續向下學習，你能夠不須要死記硬背這些目錄結構的做用，大體的瀏覽

重點記住docs，docs/.vuepress/config.js便可，其餘的等你遇到了再來看看也不遲

你可能會差別，我生成的項目中沒有這些文件或者目錄，不要緊，本身建立一個便可

.
├── docs
│   ├── .vuepress (可選的)
│   │   ├── components (可選的)
│   │   ├── theme (可選的)
│   │   │   └── Layout.vue
│   │   ├── public (可選的)
│   │   ├── styles (可選的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可選的, 謹慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可選的)
│   │   └── enhanceApp.js (可選的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

目錄做用的描述：

• docs/.vuepress: 用於存放全局的配置、組件、靜態資源等。
• docs/.vuepress/components: 該目錄中的 Vue 組件將會被自動註冊爲全局組件。
• docs/.vuepress/theme: 用於存放本地主題。
• docs/.vuepress/styles: 用於存放樣式相關的文件。
• docs/.vuepress/styles/index.styl: 將會被自動應用的全局樣式文件，會生成在最終的 CSS 文件結尾，具備比默認樣式更高的優先級。
• docs/.vuepress/styles/palette.styl: 用於重寫默認顏色常量，或者設置新的 stylus 顏色常量。
• docs/.vuepress/public: 靜態資源目錄。
• docs/.vuepress/templates: 存儲 HTML 模板文件。
• docs/.vuepress/templates/dev.html: 用於開發環境的 HTML 模板文件。
• docs/.vuepress/templates/ssr.html: 構建時基於 Vue SSR 的 HTML 模板文件。
• docs/.vuepress/config.js: 配置文件的入口文件，也能夠是 YML 或 toml。
• docs/.vuepress/enhanceApp.js: 客戶端應用的加強。

基礎配置

如今你已經嘗試過了HelloWorld，同時也大體瀏覽了一遍vuepress的目錄結構以及他們的做用，知道了docs目錄和config.js的做用

咱們嘗試作一些更加有趣的配置，記住docs/.vuepress/config.js這個是咱們項目的核心配置文件，絕大多數的內容配置（如導航欄，側邊欄，首頁的圖標，標題等等）都是在這裏進行配置的，若是你尚未這個目錄，請手動在docs目錄下新建.vuepress目錄，並新建config.js文件

module.exports = {
  title: '你的第一個vuepress博客', // 定義了你博客左上角的標題
  head: [
    ['link', { rel: 'icon', href: '/logo.jpg' }], // 自定義你博客head中的icon
  ],
  themeConfig: {
    nav:[ // 導航欄配置
      {text: 'Java', link: '/java/' },
      {text: 'Spring', link: '/spring/'},
      {text: '數據庫', link: '/db/'}      
    ],
  }
};

配置並保存，嘗試啓動（npm run dev）你的項目，就會獲得下面這樣一個簡單的博客框架

ok，這樣咱們至此咱們已經成功的建立了一個簡單的博客，雖然比較簡單，可是這也算是邁出了很大的一步

基於markdown的靜態頁面

vueperss基於markdown，因此咱們往後寫博客的文件也所有都須要用markdown

markdown文件能夠簡單理解成html文件，咱們要把他們存在docs目錄下，不要問爲何，vuepress就是這麼規定的

# 好比我寫了兩篇java博客，兩篇spring博客，那麼爲它們分好類進行存放，目錄結構是這樣的
.
├── docs
│   ├── .vuepress (可選的)
│   │   ├── config.js (可選的)
│   ├── java
│   │   └── blog1.md
│   │   └── blog2.md
│   │   └── README.md
│   ├── spring
│   │   └── blog1.md
│   │   └── blog2.md
│   ├── README.md # 首頁
└── package.json

相對的咱們須要訪問這些文件的路徑就以下
java下的blog1 ： /java/blog1/

咱們還注意到java下有一個README.md
在vuepress中約定，目錄下的README.md文件的路徑就是該目錄
因此java下的README的訪問路徑就是 /java/

到這裏你明白了你的HelloWorld是怎麼來的了嗎 ：）在docs目錄下建立README.md，訪問路徑就是/，也就是首頁

撰寫文章

上面咱們已經知道了docs目錄是關鍵，因此直接在docs目錄下新建你的分類文件夾，而後建立markdown文件寫文章便可，哦天哪，真是太簡單了！！！

主題配置

瞭解了vuepress的基礎配置後，咱們繼續嘗試一些更加炫酷的操做，主題配置

vuepress提供了強大的主題配置功能，使得使用者能夠diy本身的主題並分享

下面分別對於系統默認主題的配置以及其餘用戶diy的主題使用進行介紹

默認主題

默認的當你保持你的config.js，不去進行theme的相關配置時，使用的就是默認的主題，其效果預覽能夠參照vuepress的官方網站

這裏是vuepress官方網站提供的主題配置的相關文檔，能夠說記錄的十分詳細，我這裏就簡單的對其進行使用，帶你體驗一下

::: warning

此時你必需要已經大體明白HelloWorld是如何出現的，才能繼續的無障礙向下學習

:::

默認的主題提供了一個首頁（Homepage）的佈局 (用於 vuepress主頁)。

想要使用它，須要在你的根級 README.md 的 YAML front matter 指定 home: true。如下是一個如何使用的例子：

什麼是YAML front matter，簡單理解就是用在markdown文件的開頭配置

---
home: true # 指定爲首頁文件
heroImage: /hero.png
heroText: Hero 標題
tagline: Hero 副標題
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 簡潔至上
  details: 以 Markdown 爲中心的項目結構，以最少的配置幫助你專一於寫做。
- title: Vue驅動
  details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時可使用 Vue 來開發自定義主題。
- title: 高性能
  details: VuePress 爲每一個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將做爲 SPA 運行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

修改好後從新運行你的項目，你會看到：（圖片丟失是由於咱們沒有圖片）

是否是很熟悉，這和vuepress的首頁幾乎同樣

恭喜啊，你的博客變得愈來愈好看了，事情開始變得有趣了起來 ：）

::: tip

而後就是更多的關於導航欄、側邊欄等等的一系列的DIY配置，這裏不作詳細介紹

請移步主題配置進行更深的學習，你可能會遇到不少的坑，別灰心，嘗試解決它們

:::

使用第三方主題

主題的使用須要先將主題文件進行安裝，一行命令便可

這裏我選擇了我我的比較喜歡的一款主題vuepress-theme-hope進行介紹

通常狀況下，第三方主題都有詳細的文檔，傻瓜式的一步步教你如何進行博客搭建

這裏我也是仿照vuepress-theme-hope的文檔進行簡單介紹

# 安裝主題
# 切換到項目根目錄
npm i -D vuepress-theme-hope
# 安裝好後，注意你的node_modules目錄，會多出一個vuepress-theme-hope目錄，表明安裝成功

// 修改你的config.js,讓他變成這樣
// .vuepress/config.js
const { config } = require("vuepress-theme-hope");

module.exports = config({
  // your config here
});

我之因此喜歡這個主題，是由於它對於新手很友好，它提供了 現成的模板直接下載使用便可，咱們只要在他的基礎上修改就能夠了

vuepress-theme-hope 模板直接下載，而後進入目錄npm init -y初始化下，而後啓動便可，你想要的他都幫你配置好了！

怎麼樣是否是很簡單！

更多的關於這款主題的配置，也請移步文檔進行學習，由於文檔寫的很詳細，新手閱讀也幾乎沒有難度，因此還等什麼，趕忙來試試

部署到Gitee

建立一個gitee倉庫

這裏要注意你的倉庫名，保證和你的用戶名一致

由於我最後但願你的訪問路徑是 ：https://你的用戶名.gitee.com

build你的項目

還記得最開始咱們修改的package.json嗎，裏面除了dev還有一個build

哦對了，你還須要指定一下你的構建文件輸出目錄。在config.js中進行配置

在config中添加一個配置：dest: "./dist", // 配置build以後的文件輸出目錄，像這樣

嘗試運行 npm dev build，等待執行完成，你的項目就構建好了輸出在了當前的dist目錄中

部署腳本編寫

接下來，在根目錄下建立一個deploy-gitee.sh，輸入：

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯誤
set -e

# 生成靜態文件
npm run build

# 進入生成的文件夾
cd dist

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

# 若是部署到 https://{USERNAME}.github.io
# 下面這裏的url那一段你直接在你的git倉庫那裏複製出來粘貼就能夠
git push -f git@gitee.com:xxxx/xxxx.git master

cd -

部署上線

切換到命令行，執行該腳本，若是windows不能執行，嘗試在git bash中執行

執行完成後你的項目就會傳到gitee你的倉庫中

而後關鍵點來了，選擇你倉庫中的服務 -> gitee pages

點擊發布就行了，我這裏已經發布了，因此這裏是更新按鈕！！

而後你就能夠點擊上面顯示的域名進行博客的訪問啦！！！！！！！！！

像這樣