最快用vuepress github搭建乙個部落格

2021-09-11 14:30:57 字數 2074 閱讀 8933

vuepress是vue提供的乙個文件頁生成工具,雖然官方還沒有實現部落格適配,但是現在可以通過一些小配置檔案的修改,作為乙個自己的部落格生成工具

為了建立部落格,我們需要乙個存放部落格頁的地方,最理想的還是github啦

雖然現在github為每個倉庫都提供了github pages服務,不過我們還是需要github提供的耳機線網域名稱,所以

建立乙個repository這個repository的名字還有要求必須是《你的使用者名稱》.github.io,像我就是mizuka-wu.github.io

申請網域名稱和繫結ssl在倉庫的settings中custom domain中可以填寫自己的網域名稱,當然直接在專案目錄下建立cname檔案填寫自己的網域名稱也可以,ssl可以使用certbot自主申請三個月的(三個月續期就可以無限使用了)

為什麼使用?主要我覺得。。預設主題比較好看吧

基本環境搭建(npm)

npm init(建立個package.json)

建立blog資料夾(不用vuepress使用的doc因為我們不是建立文件

vuepress配置

vuepress生成依賴於.vuepress 當然使用預設配置也可以

我們最終是用vuepress構建我們寫好的md檔案,由於github.io相當於乙個靜態資源伺服器,所以路徑就變得很重要了, 所以配置上我們基本就是將本身的build路徑改為根目錄下的/post/ 然後將index.html這一類的資源構建完成後放入到根目錄下

const basepath = 'post'

module.exports = /`,

serviceworker: true,

evergreen: true,

ga: 'ua-112738831-1'

}複製**

"scripts": ,

複製**

推薦乙個node可以使用es module的方案esm

/**

* build blog

* @author mizuka */

import spawn from

'cross-spawn'

import from

'fs'

import config from

'./blog/.vuepress/config'

const builder = spawn('vuepress', ['build', 'blog'])

builder.stdout.on('data', function (s) )

builder.stdout.on('end', function ()

console.log('copy /post/index.html to /')

})}})

複製**

剩下的只是在blog下按照自己的喜好編寫markdown檔案就好啦,構建完畢發布到github上看看唄

vuepress官方提供了乙個主頁生成的語法 這裡說一下怎麼顯示所有的文件

vuepress支援在markdown中寫vue!

vuepress提供了很多資訊,比如$site.pages

在blog/readme.md下增加一段vue**

# 所有文章

"display: flex; flex-direction: column">

"page of $site.pages.filter(item => item.path !== '/')" :key="page.key" style="padding: 20px 0; max-width: 33%;">

"page.path">

}"color: #c2c5cd; font-size: .5rem;">}

複製**

用最快的速度學會Git的運用

隨著寫的 越多會發現,很多小小的短的 會慢慢的被遺忘。雖說不是很高深的 但是感覺平時敲得 一次不小心刪掉了,感覺挺可惜的,而git可以很好地解決這一問題。配置git身份資訊 git config global user.name abc git config global user.email ab...

用Java實現最快速度的陣列交集

演算法 一 暴力破解法,遍歷兩個陣列,比較值。借用第三個陣列來裝載相同的值。時間複雜度為o n public static int intersect int arr1,int arr2 else int n newint n int k 0 for int i 0 i n arrays.copyo...

電腦鍵盤打字手法 手機打字用什麼方法最快?

極客談科技 全新視角 全新思路,伴您遨遊神奇的科技世界。看到這個問題,不禁令我想到了黑莓手機,離我們遠去的全鍵盤手機 實體鍵盤能夠提供的極致觸感是螢幕所無法取代的 無論是電腦端,還是手機端,如何在確保準確率的前提下,快速完成打字輸出將會提公升我們的辦事效率。這裡將會從輸入法的選擇 輸入操作建議 特殊...