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了, 对于各位老司机而言已经轻车熟路啦, 因此本篇就不赘述了, 下篇针对不太熟悉的同窗讲下具体的思路和步骤吧 初次写博客, 不清楚不明白的地方请多见谅...