vue + typescript + markdown + github.io 搭建我的博客

vue + typescript + markdown + github.io 搭建我的博客

created by zhangw

一直以來都想搭建一個本身的博客, 可是恰好不久前阿里雲的試用半年的服務器到期了..., 也一直沒找到物美價廉(乞丐版)的服務器, emmmmm...可是博客還得搭呀, 因此就試着用Vue和Github Page搭建一個博客

live demo Github倉庫

思路

搭建一個博客的必要條件 = 一個域名 + 一個服務器 + 博客前端
恰好域名和服務器 Github page 都解決了,雖然不能部署服務程序, 可是對於搭建博客來講, 部署前端文件其實也就夠了
博客的形式固然是選擇markdown啦, 又方便又簡單, 必要條件都具有了, 因此就開始吧

Github Page

Github Page官方的描述是

Websites for you and your projects. Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

就是github爲開發者提供的一個展現我的或項目的網站。Github page實際上是一個會提供一個github.io域名的文件服務器。你能夠在上面聽任何你想要展示的東西。

建立Github Page

1. 在你的github倉庫建立一個名稱爲 yourGithubId.github.io 的倉庫, (把YourGithubId改爲你本身的github id便可, 例如 only4ly.github.io)
2. 把你的倉庫clone下來

   git clone https://github.com/only4ly/only4ly.github.io.git
   複製代碼

3. 用編輯器打開你克隆下來的項目,建立 index.html
4. 把你的項目從新提交到github

   cd only4ly.github.io
   git commit -am 'init blog'
   git push origin master
   複製代碼

5. 成功以後, 用瀏覽器打開 yourGithubId.github.io, 不出意外, 你就能夠看到所建立的index.html的內容了

搭建Blog項目

用Vue-cli搭建Vue+Typescript

GitHub Page 搞定了以後就能夠搭建項目了, 因爲是我的項目, 因此固然是本着折騰的精神選擇了Vue+Typescript

cd projects
// vue-cli 已集成typescript的模板 其他步驟和正常搭建項目同樣~
vue init SimonZhangITer/vue-typescript-template vue-ts-blog
cd vue-ts-blog
npm install
npm run dev
複製代碼

解析.md文件(核心步驟)

我使用的是 vue-markdown-loader, 一個能夠把markdown文件解析成vue組件的一個webpack-loader, github倉庫以下, 感謝大神！ https://github.com/QingWei-Li/vue-markdown-loader

1. 安裝 vue-markdown-loader

npm i vue-markdown-loader -D
複製代碼

2. 在build文件夾中的webpack.base.conf.js的module.rules添加以下規則

module: {
    rules: [
      ...
      // 添加如下代碼
      {
        test: /\.md$/,
        loader: 'vue-markdown-loader',
        options: {
          wrapper: 'article'
        }
      },
      // 截止
      ...
    ]
  }
複製代碼

3. 因爲是typescript語法, 雖然markdown文件能夠被解析成vue的組件, 可是做爲模塊引入的時候, typescript是沒法識別的, 因此要添加相應的.d.ts文件, 使typescript能夠識別.md文件, 在src/typings 添加 markdown.d.ts 文件, 添加以下代碼

// 使typescript將.md文件做爲vue對象引入
declare module "*.md" {
  import Vue from 'vue'
  export default Vue
}
複製代碼

而後, 你就能夠將.md文件做爲一個vue組件引入(就像一個.vue單文件組件同樣) eg:

<template>
  // class 便於後期美化markdown樣式
  <Blog class="blog-post"/>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import Blog from '@/articles/blog.md'

@Component({
  components: {
    Blog
  }
})
export class Blog extends Vue {}
</script>
複製代碼

美化markdown樣式

講下思路吧: markdown文件解析出來的html都是特定的語義化標籤, 已經有很是多的現有的css庫能夠直接用, 貼一個我用的bootstrap的博客模板吧 博客模板
而後是引入highlight加入代碼高亮 highlight.js文檔

結束

ok 到這一步, 咱們就已經初步完成項目的搭建而且成功的解析了markdown文件。 至此, 剩下的步驟就是配置vue-router, 將你項目打包出來的文件上傳到github.io的項目中就ok了, 對於各位老司機而言已經輕車熟路啦, 因此本篇就不贅述了, 下篇針對不太熟悉的同窗講下具體的思路和步驟吧 初次寫博客, 不清楚不明白的地方請多見諒...