人博客網(wǎng)站搭建

VuePress介紹

本人的個(gè)人博客網(wǎng)站，網(wǎng)站地址，是基于VuePress進(jìn)行搭建。

什么是VuePress

根據(jù)官網(wǎng)：VuePress 由兩部分組成：第一部分是一個(gè)極簡靜態(tài)網(wǎng)站生成器， 它包含由 Vue 驅(qū)動(dòng)的主題系統(tǒng)和插件 API，另一個(gè)部分是為書寫技術(shù)文檔而優(yōu)化的默認(rèn)主題， 它的誕生初衷是為了支持 Vue 及其子項(xiàng)目的文檔需求。每一個(gè)由 VuePress 生成的頁面都帶有預(yù)渲染好的 HTML， 也因此具有非常好的加載性能和搜索引擎優(yōu)化（SEO）。

同時(shí)，一旦頁面被加載，Vue 將接管這些靜態(tài)內(nèi)容，并將其轉(zhuǎn)換成一個(gè)完整的單頁應(yīng)用（SPA）， 其他的頁面則會(huì)只在用戶瀏覽到的時(shí)候才按需加載。

VuePress 工作原理

事實(shí)上，一個(gè) VuePress 網(wǎng)站是一個(gè)由 Vue、Vue Router 和 webpack驅(qū)動(dòng)的單頁應(yīng)用。 如果你以前使用過 Vue 的話，當(dāng)你在開發(fā)一個(gè)自定義主題的時(shí)候，你會(huì)感受到非常熟悉的開發(fā)體驗(yàn)， 你甚至可以使用 Vue DevTools 去調(diào)試你的自定義主題。

在構(gòu)建時(shí)，我們會(huì)為應(yīng)用創(chuàng)建一個(gè)服務(wù)端渲染（SSR）的版本， 然后通過虛擬訪問每一條路徑來渲染對(duì)應(yīng)的HTML。

快速開始

前置條件

1、在開始之前我們需要確保你的本地是由nodejs的環(huán)境，我們先來驗(yàn)證一下， 打開的命令行工具，我的是mac所以打開的終端（Windows打開cmd），輸入一下命令：

 node -v

說明：出現(xiàn)版本號(hào)，說明你本地是有環(huán)境。

2、接著我們來驗(yàn)證是否有npm工具：

 npm -v

如果有的小伙伴沒有相關(guān)環(huán)境：請(qǐng)按如下提示進(jìn)行環(huán)境準(zhǔn)備

1、下載nodejs

登錄nodejs官網(wǎng)：nodejs官網(wǎng)

下載符合你個(gè)人系統(tǒng)的軟件，進(jìn)行安裝，安裝過程很簡單，這里就不過多贅述。 安裝完成后，繼續(xù)上面所說的進(jìn)行驗(yàn)證node的版本和npm的版本

正式開始

1、創(chuàng)建目錄

在你的終端執(zhí)行進(jìn)行入的放放置項(xiàng)目的目錄，創(chuàng)建一個(gè)目錄，如下命令：

// 進(jìn)入一個(gè)目錄
cd 你的目錄
//創(chuàng)建一個(gè) blog_web 目錄
mdkir blog_web

2、初始化目錄

//進(jìn)入 blog_web
cd blog_web
//初始化目錄
npm init -y

根據(jù)提示設(shè)置一些必要的信息，無需設(shè)置直接回車，最后輸入yes，設(shè)置完成后，如下圖所示：

此時(shí)，blog_web目錄先會(huì)有一個(gè)package.json文件,打開文件看一下有什么信息。

//編輯文件
vi packag.json

{
  "name": "blog_web",
  "version": "1.0.0",
  "description": "我的博客網(wǎng)站",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "北漂碼農(nóng)有話說",
  "license": "ISC"
}

可以看到，就是我們剛才設(shè)置的一些信息。

3、安裝VuePress

//安裝在你的目錄下
npm install -D vuepress

也可以進(jìn)行全局安裝

npm install -g vuepress

全局安裝以后在任何目錄下都可以使用VuePress

安裝完成后可以看到項(xiàng)目下多了一個(gè)目錄node——modules，這里都是我們需要依賴的文件。

4、創(chuàng)建你的博客相關(guān)目錄

在blog_web目錄下創(chuàng)建一個(gè)docs目錄，進(jìn)入docs目錄創(chuàng)建.vuepress目錄， 創(chuàng)建一個(gè)README.md文件，涉及的命令如下：

mkdir docs

cd docs

mkdir .vuepress

5、配置網(wǎng)站頭

進(jìn)入.vuepress目錄下創(chuàng)建，config.js文件，配置以下信息

module.exports = {
    title: '北漂碼農(nóng)優(yōu)化說',
    description: '歡迎來到我的博客'
}

6、配置網(wǎng)站首頁

進(jìn)入docs目錄，打開README.md文件，配置如下內(nèi)容：

---
home: true
heroImage: http://cdn.triumphxx.com.cn/img/%E9%A1%B5%E5%A4%B4.jpg
heroText: 北漂碼農(nóng)有話說
tagline: Java 全棧技術(shù)交流平臺(tái)
actionText: 開始學(xué)習(xí) →
actionLink: /
features:
- title: 純原創(chuàng)
  details: 不做互聯(lián)網(wǎng)的搬運(yùn)工，我們踏實(shí)搞技術(shù)。
- title: 成系列
  details: 成系列的教程合集，告別碎片化學(xué)習(xí)，Java 學(xué)習(xí)一步到位！
- title: 有案例
  details: 文章都有配套案例，搜索微信公眾號(hào)【北漂碼農(nóng)有話說】，及時(shí)獲取文檔更新通知！
footer: 關(guān)注微信公眾號(hào)【北漂碼農(nóng)有話說】，眾多技術(shù)呈現(xiàn)給你！

---

7、啟動(dòng)項(xiàng)目

進(jìn)入到blog_web目錄，加入如下腳本

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

在終端執(zhí)行如下命令，啟動(dòng)項(xiàng)目：

npm run dev

出現(xiàn)如下信息說明啟動(dòng)成功

進(jìn)行訪問http://localhost:8080/

出現(xiàn)上面的畫面，那么恭喜你，你想網(wǎng)站已經(jīng)啟動(dòng)成功。

持續(xù)優(yōu)化

1、配置網(wǎng)站角標(biāo)

現(xiàn)在網(wǎng)站的頭部很單調(diào)，我們需要進(jìn)行優(yōu)化

進(jìn)入.vuepress目錄下，在config.js文件下設(shè)置hand的信息，如下：

module.exports = {
    title: '北漂碼農(nóng)有話說',
    description: '歡迎來到我的博客',
    head: [
        ['link', {rel: 'icon', href: 'http://cdn.triumphxx.com.cn/img/%E5%85%AC%E4%BC%97%E5%8F%B71.jpeg'}],
    ],
}

2、配置網(wǎng)站logo、導(dǎo)航欄、側(cè)邊欄

進(jìn)入.vuepress目錄下，在config.js文件下信息，如下：

module.exports = {
    title: '北漂碼農(nóng)有話說',
    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目錄先創(chuàng)建java目錄，并且在java目錄下創(chuàng)建，READNE.md、 java1.md、java2.md文件，同理創(chuàng)建web目錄。項(xiàng)目目錄結(jié)構(gòu)圖如下：

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

3、查看網(wǎng)站效果

首頁

java

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

這樣我們的靜態(tài)博客網(wǎng)站就搭建完成了

小結(jié)

好啦，小伙伴們，到此我們的靜態(tài)博客網(wǎng)站就基本搭建完成了。至于如何部署上線，微信搜一搜【北漂碼農(nóng)有話說】 我們下回分享。

蘋果本月初的Apple Watch發(fā)布會(huì)上，作為首批支持Apple Watch的應(yīng)用之一，微博推出了“微博運(yùn)動(dòng)”的新項(xiàng)目，企圖利用Apple Watch中的健康互動(dòng)功能，幫助用戶實(shí)時(shí)記錄與分享運(yùn)動(dòng)數(shù)據(jù)。雖然Apple Watch要到4月24日才會(huì)全球正式上市，但微博今日更新了iOS客戶端，提前讓我們體驗(yàn)“微博運(yùn)動(dòng)”功能。

此前，據(jù)微博官方公布的方法顯示，用戶完成微博賬號(hào)與iOS設(shè)備捆綁后，即可在iPhone端和Watch端同步記錄運(yùn)動(dòng)數(shù)據(jù)。在Watch端，用戶分別可以看到自己的基礎(chǔ)信息，在所關(guān)注人當(dāng)中的步數(shù)排名和卡路里消耗排名，以及正在參與的活動(dòng)/任務(wù)，微博還會(huì)充分利用Apple Watch在推送通知方面的優(yōu)勢，展示多樣化的內(nèi)容，豐富用戶體驗(yàn)。

微博運(yùn)動(dòng)直接嵌入在客戶端個(gè)人主頁的功能選項(xiàng)里

初次使用需要簡單地設(shè)置用戶數(shù)據(jù)

在iOS版微博客戶端V5.1.5中，“微博運(yùn)動(dòng)”直接嵌入在客戶端個(gè)人主頁的功能選項(xiàng)里，用戶點(diǎn)擊即可進(jìn)入主界面。主界面目前僅顯示“基礎(chǔ)數(shù)據(jù)”，“基礎(chǔ)數(shù)據(jù)”部分可查看用戶的基本運(yùn)動(dòng)數(shù)據(jù)。據(jù)悉晚些時(shí)候，微博運(yùn)動(dòng)還將上線“活動(dòng)任務(wù)”。通過“活動(dòng)任務(wù)”，用戶可參與明星和團(tuán)體發(fā)起的健身活動(dòng)。

設(shè)置完成個(gè)人資料后，便可以顯示用戶的基本數(shù)據(jù)

隨著全民健身上升為國家戰(zhàn)略，人們對(duì)健康狀況的日益重視。而如今越來越多的智能設(shè)備將對(duì)運(yùn)動(dòng)數(shù)據(jù)的記錄和監(jiān)測作為主打功能推出。然而，簡單的數(shù)據(jù)對(duì)于運(yùn)動(dòng)個(gè)體而言是相對(duì)枯燥而不直觀的，且不具備激勵(lì)參與的機(jī)制。如何激勵(lì)用戶更多地參與運(yùn)動(dòng)，則讓各大設(shè)備廠商頭疼不已。早前，微信運(yùn)動(dòng)則推出了以“好友運(yùn)動(dòng)PK”的主題進(jìn)行健身運(yùn)動(dòng)對(duì)比。鼓勵(lì)大家好友間互相比拼健身運(yùn)動(dòng)。

微信運(yùn)動(dòng)是基于好友圈里的好友運(yùn)動(dòng)PK

而新上線的“微博運(yùn)動(dòng)”，則改變了以往運(yùn)動(dòng)型App“個(gè)人記錄”或者“好友運(yùn)動(dòng)PK”的模式，而是連接了智能穿戴設(shè)備、運(yùn)動(dòng)數(shù)據(jù)和微博社交平臺(tái)，不僅使枯燥的數(shù)據(jù)有了豐富的應(yīng)用場景，用戶還能在社會(huì)化平臺(tái)享運(yùn)動(dòng)數(shù)據(jù)，參與明星、好友發(fā)起的活動(dòng)，進(jìn)行互動(dòng)，并獲取運(yùn)動(dòng)健康相關(guān)的服務(wù)，全面提升了參與感和運(yùn)動(dòng)的樂趣，吸引用戶更好地參與。

而微博運(yùn)動(dòng)則可以通過社交平臺(tái)，進(jìn)行全平臺(tái)互動(dòng)

此外，作為用戶規(guī)模最大的移動(dòng)應(yīng)用之一，微博一直在強(qiáng)化與蘋果的合作，利用本次客戶端的捆綁契機(jī)，通過用戶授權(quán)，微博將可以獲得自有平臺(tái)上活躍著的上億蘋果用戶授權(quán)的運(yùn)動(dòng)數(shù)據(jù)，成為擁有用戶運(yùn)動(dòng)數(shù)據(jù)最多的應(yīng)用。熱愛運(yùn)動(dòng)的用戶趕緊來更新，加入全民健身的步伐吧!