8 分鐘教你免費搭建屬於自己的博客（超詳細）

Vercel

vercel 是一個開箱即用的網站託管服務，它在全球都擁有 CDN 節點，因此比 Github 官方自帶的 github pages 更加穩定，訪問速度更快。在使用 github pages 構建靜態博客時，經常會遇到提交代碼，構建成功了，過了半天通過 github 域名訪問，網站內容還是沒有更新，而使用 vercel，就完全不會有這個問題。

Docsify

Docsify 是一個 運行時 的靜態網站構建工具，它不會把 markdown 文件轉換成 html 文件，不需要啓動，不需要打包，只需要一個 index.html 和一堆 markdown 文件就可以完成你的靜態網站搭建，就是這麼簡單。

準備

開始

創建 github 項目

克隆項目到本地

git clone git@github.com:lexmin0412/docsify-website-sample.git

本地會生成一個名爲 docsify-website-sample 的空項目。

搭建基礎框架

在根目錄分別創建以下文件：

並填入對應內容：

index.html
<!-->index.html<-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>docsify website sample</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta >
  <meta >
  <!-- vue主題樣式 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
  <!-- 暗黑主題插件樣式 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/style.min.css"
    title="docsify-darklight-theme" type="text/css" />
</head>

<body>
  <div id="app">loading...</div>
  <!-- 在github上編輯插件 -->
  <script src="//cdn.jsdelivr.net/npm/docsify-edit-on-github"></script>
  <script>
    window.$docsify = {
      basePath: '/', // 資源相對路徑
      name: 'docsify website sample', // 文檔標題，會顯示在側邊欄頂部
      nameLink: '/', // 點擊文檔標題後的跳轉地址
      repo: 'lexmin0412/docsify-website-sample', // 有repo屬性則右上角會展示github圖標，點擊可進入
      loadSidebar: true, // 加載側邊欄
      externalLinkTarget: '_blank', // 外部鏈接的打開方式，默認_blank
      cornerExternalLinkTarget: '_blank', // 右上角鏈接的打開方式。默認爲 _blank
      routerMode: 'hash', // 路由方式 默認hash
      coverpage: true, // 展示封面
      notFoundPage: true, // 在找不到指定頁面時加載_404.md
      auto2top: true, // 切換頁面後是否自動跳轉到頁面頂部
      search: { // 搜索插件配置
        paths: 'auto',
        placeholder: '🔍 搜索',
        noData: '😞 沒有結果!'
      },
      count: { // 字數統計插件配置
        countable: true,
        fontsize: '0.9em',
        color: 'rgb(90,90,90)',
        language: 'chinese'
      },
      pagination: { // 分頁插件配置
        previousText: '上一章節',
        nextText: '下一章節',
        crossChapter: true,
      },
      plugins: [
        EditOnGithubPlugin.create(
          'https://github.com/lexmin0412/docsify-website-sample/blob/master/docs/',
          null,
          function ( file ) {
            if ( file.indexOf( 'en' ) === -1 ) {
              return '在 GitHub 上編輯'
            } else {
              return 'Edit on Github'
            }
          }
        )
      ],
      themeColor: "#42b983", // 暗黑模式主題色
      darklightTheme: {
        siteFont: "PT Sans",
        defaultTheme: 'dark',
        codeFontFamily: 'Roboto Mono, Monaco, courier, monospace',
        bodyFontSize: '17px',
        dark: {
          accent: '#42b983',
          toogleBackground: '#ffffff',
          background: '#091a28',
          textColor: '#b4b4b4',
          codeTextColor: '#ffffff',
          codeBackgroudColor: '#0e2233',
          borderColor: '#0d2538',
          blockQuoteColour: '#858585',
          highlightColor: '#d22778',
          sidebarSublink: '#b4b4b4',
          codeTypeColor: '#ffffff',
          coverBackground: 'linear-gradient(to left bottom, hsl(118, 100%, 85%) 0%,hsl(181, 100%, 85%) 100%)',
          toogleImage: 'url(https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/sun.svg)'
        },
        light: {
          accent: '#42b983',
          toogleBackground: '#091a28',
          background: '#ffffff',
          textColor: '#34495e',
          codeTextColor: '#525252',
          codeBackgroudColor: '#f8f8f8',
          borderColor: 'rgba(0, 0, 0, 0.07)',
          blockQuoteColor: '#858585',
          highlightColor: '#d22778',
          sidebarSublink: '#b4b4b4',
          codeTypeColor: '#091a28',
          coverBackground: 'linear-gradient(to left bottom, hsl(118, 100%, 85%) 0%,hsl(181, 100%, 85%) 100%)',
          toogleImage: 'url(https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/moon.svg)'
        }
      }
    }
  </script>
</body>

<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<!--全局搜索插件-->
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
<!--字數統計插件-->
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
<!--代碼段複製插件-->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
<!--圖片縮放插件-->
<script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
<!-- 閱讀進度條插件 -->
<script src="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/index.min.js"></script>
<!-- 暗黑主題切換插件 -->

</html>
README.md
# 標題

這是一個 docsify 網站模版。
_coverpage.md
# docsify website sample <small>0.0.1</small>

<a href="https://github.com/lexmin0412/docsify-website-sample">Github</a>
<a href="#README">Get Started</a>
_sidebar.md
- 開始

  - [概述](/README.md)

本地運行

在 VSCode 中打開 index.html，右鍵 --> 使用 Live Server(或其他插件) 在瀏覽器中打開，即可看到如下的頁面：

點擊 Github，會跳轉到我們一開始在 github 創建的項目 (暫時是空的，因爲我們還沒有 push 代碼)，點擊 Get Started，會跳轉到 _coverpage.md 中配置的頁面 (我們這裏是 README.md)。

這樣，我們的本地調試工作就完成了。

配置 vercel 自動部署

推送本地代碼到 github 倉庫，完成之後通過 vercel.com/dashboard 進入 vercel 的工作臺，會看到頂部是如下的界面：

點擊右邊的 New Project 按鈕，進入下一步：

左側的列表中，按更新的先後順序展示了你所有的 github 項目列表，點擊剛剛創建的 docsify-website-sample 項目的 Import 按鈕，進入下一步：

選擇你的個人 github 賬號對應的條目，點擊 Select 按鈕，下一步會要求選擇構建的根目錄：

不用管，直接點擊 Continue 按鈕即可進入下一步：

直接點擊 Deploy 按鈕，稍等片刻，就會出現一個 Congratulations 界面：

點擊 visit，vercel 已經幫你自動在 docsify-website-sample.vercel.app 這個域名下部署了項目，可以正常訪問：

到這一步就算成功了，從此以後，只要你在本地對文檔內容做了修改，push 到 github 之後，vercel 就會自動觸發構建更新了。

你可以根據需求修改 index.html 中的內容來定製你的界面展示。

關於本文

作者：lexmin

https://juejin.cn/post/6951789326782955534

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/mcnVd2hBnpWg2KMVaVGDag

猜你喜歡