VuePress從零開始搭建專屬博客

時間 2021-08-14

標籤 vue node react webpack git github web shell npm json 欄目 React 简体版

原文原文鏈接

簡介

歡迎使用個人指南，瞭解如何使用VuePress! 這個項目的產生是出於使用 VuePress 做爲個人博客引擎的願望，而且沒有明確的途徑.vue

VuePress是什麼？

VuePress是以Vue驅動的靜態網站生成器，是一個由Vue、Vue Router和webpack驅動的單頁應用。在VuePress中，你可使用Markdown編寫文檔，而後生成網頁，每個由VuePress生成的頁面都帶有預渲染好的HTML，也所以具備很是好的加載性能和搜索引擎優化。同時，一旦頁面被加載，Vue將接管這些靜態內容，並將其轉換成一個完整的單頁應用，其餘的頁面則會只在用戶瀏覽到的時候才按需加載。node

版本

該項目目前位於 version 0.11.0-beta.react

目的

該項目的目標很簡單:webpack

記錄我使用VuePress搭建博客的全過程,以便之後翻閱學習,同時但願能夠幫到你,爲你提供多樣的選擇,您根據本身的喜愛自定義它。git

功能

爲何要使用VuePress搭建博客呢,除了VuePress自帶的出色功能以外,您還能夠當即使用如下工具：github

自動生成主頁上的最新帖子
簡單的Google Analytics（分析）配置
自動RSS提要生成
簡單的圖標配置
主頁上的簡單分頁
全部帖子的存檔頁面按日期排序

小菜一碟吧？那就不要時間浪費了，讓咱們開始吧！web

入門

準備

NodeJS >= 8
yarn (可選)
nodeJS以及vue基礎知識
gitBash here

安裝

全局安裝VuePress

yarn global add vuepress # 或者：npm install -g vuepress複製代碼

建立項目目錄

mkdir project
cd project複製代碼

初始化項目

yarn init -y # 或者 npm init -y複製代碼

新建docs文件夾

docs文件夾做爲項目文檔根目錄，主要放置Markdown類型的文章和.vuepress文件夾。shell

# 新建一個 docs 文件夾mkdir docs# 進入docs文件夾 建立 README.md文件echo '# Hello VuePress!' > README.md複製代碼

設置package.json

VuePress中有兩個命令，vuepress dev docs命令運行本地服務，經過訪問http://localhost:8080便可預覽網站，vuepress build docs命令用來生成靜態文件，默認狀況下，放置在docs/.vuepress/dist目錄中，固然你也能夠在docs/.vuepress/config.js中的dest字段來修改默認存放目錄。在這裏將兩個命令封裝成腳本的方式，直接使用npm run docs:dev和npm run docs:build便可。npm

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}複製代碼

此時運行命令

npm run  docs:dev複製代碼

運行訪問http://localhost:8080/,(此時頁面空白並沒有內容)json

結束運行,執行命令

npm run docs:build複製代碼

查看文件變化多了個node_modules
docs 多了個 .vuepress文件

配置config.js

# 在.vuepress 建立config.js 文件 # 在config.js 添加配置信息module.exports = {
  title: 'Harold\'s blog',
  description: '描述',
  head: [ // 注入到當前頁面的 <head> 中的標籤
    ['link', { rel: 'icon', href: '/logo.png' }],
    ['link', { rel: 'manifest', href: '/logo.png' }],
    ['link', { rel: 'apple-touch-icon', href: '/logo.png' }],
  ],
  serviceWorker: true, // 是否開啓 PWA
  base: '/VuePress/', // 部署到github相關的配置
  markdown: {
    lineNumbers: true // 代碼塊是否顯示行號
  },
  themeConfig: {
    // 導航欄配置
    nav:[
      {text: 'Home', link: '/' },
      {text: 'Learn', link: '/learn/' },
      {text: 'Profile', link: '/profile/' },
      {text: 'vue', link: '/vue/' },
      {text: 'react', link: '/react/' },
      {text: '風花雪月', link: '/風花雪月/' }
    ],
    version: '0.11.0-beta'
  }
}複製代碼

base 站點的基礎路徑，它的值應當老是以斜槓開始，並以斜槓結束。這裏設置爲 /VuePress/，咱們再次在本地運行項目，訪問路徑就須要變動爲http://localhost:8080/VuePress/
title 網站的標題
description 網站的描述

運行項目

npm run  docs:dev複製代碼

(如圖)

部署

完成上面的工做以後,固然還有最後一步,咱們須要講代碼部署到服務器上,我這裏介紹的是部署GitHub Pages,具體請參照文檔：Vupress-部署.固然對於本身有服務器的,也能夠嘗試部署到本身的服務器上.

建立github倉庫

在github上建立一個倉庫,並將你的代碼提交到github上.
在 docs/.vuepress/config.js 文件中設置正確的 base。部署站點的基礎路徑，若是你想讓你的網站部署到一個子路徑下，你將須要設置它。如 GitHub pages，若是你想將你的網站部署到 https://foo.github.io/bar/，那麼 base 應該被設置成 "/bar/"，

自動部署

在項目根目錄中，建立一個以下的 deploy.sh 腳本文件（請自行判斷去掉高亮行的註釋）:

#!/usr/bin/env sh

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

# 生成靜態文件
npm run docs:build

# 進入生成的文件夾
cd docs/.vuepress/dist

# 若是是發佈到自定義域名
# echo 'www.example.com' > CNAME

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

# 若是發佈到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 若是發佈到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -複製代碼

在依賴package.json文件中添加

{
  "scripts": {
    "deploy": "bash deploy.sh"
  }
}複製代碼

雙擊deploy.sh運行腳本或者項目根文件夾右鍵 gitBash here , 而後輸入bash deploy.sh,會自動部署在咱們的 GitHub 倉庫中deploy.sh文件中配置的master:gh-pages分支

操做github

最後, 打開github, 在 GitHub 項目點擊 Setting 按鈕，找到 GitHub Pages - Source，選擇 gh-pages 分支，點擊 Save 按鈕後，靜靜地等待它部署完成便可。

踩坑

踩坑當我徹底按照合理的配置進行了操做,可是依舊沒有把項目佈置到GitHub Pages上

挖坑:在deploy.sh文件中,最後push的時候有個坑git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages,若是你的項目是用ssh 克隆下來的就沒問題，但很不幸,我是用簡單並習慣的https 克隆下來的,
填坑: 配置ssh完之後從新用ssh克隆下項目，雙擊deploy.sh就能夠自動部署了

配置ssh

一.設置git的user name和email

若是你是第一次使用，或者尚未配置過的話須要操做一下命令，自行替換相應字段。

git config --global user.name "harold1024"
git config --global user.email  "744924498@qq.com"複製代碼

二.檢查是否存在SSH Key

cd ~/.ssh
ls
//看是否存在 id_rsa 和 id_rsa.pub文件，若是存在，說明已經有SSH Key複製代碼

ls是列出全部文件，看有沒有id_rsa 和 id_rsa_pub
若是有跳過生成密鑰這一步

三.生成密鑰

ssh-keygen -t rsa -C "744924498@qq.com"複製代碼

四.獲取SSH Key

cat id_rsa.pub
//拷貝祕鑰 ssh-rsa開頭複製代碼

五.GitHub添加SSH Key

GitHub點擊用戶頭像，選擇setting
在左側選擇 SSH and GPG keys
新建一個SSH Key
取個名字，把以前拷貝的祕鑰複製進去，添加就好啦。

六.驗證和修改

測試是否成功配置SSH Key

ssh -T git@github.com
//運行結果出現相似以下
Hi harold1024! You've successfully authenticated, but GitHub does not provide shell access.複製代碼

在項目 Clone or download中便可切換Use HTTPS爲Use SSH.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。