1. 為什么要建個(gè)人博客

其實(shí)有這個(gè)念頭已經(jīng)有很多年了，博客剛剛興起那會(huì)就在網(wǎng)上寫(xiě)一些碎碎念的東西，平臺(tái)從博客中國(guó)、到博客大巴、到新浪微博、到簡(jiǎn)書(shū)、到微信公眾號(hào)，沒(méi)有哪一個(gè)是持續(xù)且持久的，而且在別人的平臺(tái)上，有些內(nèi)容不知哪里違禁，給我撤下來(lái)了。前幾日，無(wú)意間刷到一個(gè)個(gè)人網(wǎng)站，又激發(fā)了我建立個(gè)人獨(dú)立博客的念頭，當(dāng)機(jī)立斷，決定著手建立一個(gè)個(gè)人獨(dú)立博客，從買(mǎi)域名到部署，總共花了 4 天的時(shí)間。

建立個(gè)人博客，有一個(gè)根本需求，藉由寫(xiě)這個(gè)行為時(shí)不時(shí)和自己聊一聊，以倒逼自己對(duì)自己的記錄、整理和輸出。 如果跟自己聊得不錯(cuò)，能構(gòu)建自己的系統(tǒng)也是極好的，至于其他，都是后話(huà)。

2. 如何建站

以下步驟大致記錄了我的建站過(guò)程：

1. 購(gòu)買(mǎi)一個(gè)域名
2. 在本地搭建博客

2.1. 購(gòu)買(mǎi)一個(gè)域名{#buy-domain}

在購(gòu)買(mǎi)域名之前，可以先想好自己博客的地址，然后再去域名購(gòu)買(mǎi)網(wǎng)站上查看，這個(gè)地址是不是已經(jīng)被其他買(mǎi)了。

我是在 GoDaddy 上購(gòu)買(mǎi)的域名，GoDaddy 支持支付寶付款。當(dāng)然也可以選擇去阿里云旗下的萬(wàn)網(wǎng)購(gòu)買(mǎi)域名。在下單前可以先去淘寶搜索一下是否有 GoDaddy 的優(yōu)惠券可用。

選域名這個(gè)步驟花費(fèi)了我大概 6 個(gè)小時(shí)的時(shí)間，一個(gè)方面是因?yàn)閭溥x的域名不是被人注冊(cè)了，就是太貴；另一方面，我本人比較糾結(jié)。本來(lái)想一次性買(mǎi) 10 年，讓自己做好 10 年記錄的準(zhǔn)備，但是又對(duì)自己是否能堅(jiān)持那么就不太確定，就改成了 3 年了。

2.2. 在本地搭建博客

2.2.1. 選擇搭建個(gè)人博客的工具

搭建個(gè)人博客或網(wǎng)站的工具有很多，比如 Hugo, Hexo, Jekyll, MkDocs, Gatsby 等等。

Github+Jekyll 搭建個(gè)人博客三步走 | 極簡(jiǎn)小白教程

從眾多工具中選擇 docusaurus 的原因很簡(jiǎn)單，它是我在工作使用的工具，公司所有產(chǎn)品的文檔網(wǎng)站都是使用這個(gè)工具搭建，已經(jīng)很熟悉了，不想花時(shí)間去熟悉其他工具的使用。

Docusaurus 是 Facebook 的開(kāi)源工具之一，它可以讓用戶(hù)建立自己的文檔網(wǎng)站，可以設(shè)置為 blog-only 的模式。關(guān)于 Docusaurus 和其他工具的比較 在 Docusaurus 的說(shuō)明文檔可以看到。

2.2.2. 如何用 Docusaurus 建站

Docusaurus 建站比較簡(jiǎn)單，按照教程，幾分鐘就可以弄好。

1. 新建網(wǎng)站，輸入以下命令。命令執(zhí)行完成后，電腦上會(huì)多出一個(gè)名字為 my-website 的文件夾。

npx create-docusaurus@latest my-website classic //my-website 改成自己網(wǎng)站的名字

2. 開(kāi)啟網(wǎng)站，進(jìn)入網(wǎng)站文件夾目錄下，開(kāi)啟本地預(yù)覽網(wǎng)址。

cd my-website //進(jìn)入 my-website 目錄下
npx docusaurus start //本地預(yù)覽網(wǎng)站，執(zhí)行該命令后，用瀏覽器打開(kāi) http://localhost:3000 這個(gè)地址，可以預(yù)覽網(wǎng)站

3. 修改 docusaurus.config.js 文件里的配置。

const config = {
  // highlight-start
  title: '簡(jiǎn)疏志', //博客名字
  tagline: '常精進(jìn)，勿懈怠', //博客標(biāo)語(yǔ)
  url: 'https://jianshuzhi.me', //改成自己的域名
  baseUrl: '/',
  //...
  favicon: 'img/favicon.ico', 
  organizationName: 'anattaguo', // 更改為自己的名字或者 github 的用戶(hù)名.
  projectName: 'jianshuzhi', // 改成這個(gè)項(xiàng)目的名字，可以寫(xiě) github 上的倉(cāng)庫(kù)名字
  // highlight-end

  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        // highlight-next-line  
        docs: false, //如果不想保留 docs 的功能就設(shè)置為 false; 如果想保留文檔的功能就刪除這一行
        docs: {
          //...
          // highlight-next-line
          editUrl: 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', // 刪除這一行，這是某個(gè)頁(yè)面下的‘編輯本頁(yè)面'功能
        },
        blog: {
          routeBasePath: '/', // 將博客設(shè)置為網(wǎng)站的根頁(yè)面
          blogTitle: '簡(jiǎn)疏志',
        },
        //...
      }),
    ],
  ],

  themeConfig:
   //...
    ({
      navbar: {
        //highlight-start  
        title: '簡(jiǎn)疏志', // 導(dǎo)航條左上角的名字
        logo: {
          alt: 'My Site Logo',
          src: 'img/logo.png', // 導(dǎo)航條左上角的 logo
        },
        items: [
          {to: '/', label: '博客', position: 'left'}, 
        // highlight-end
          //...

        ],
      },
        // highlight-next-line
        copyright: `Copyright ? ${new Date().getFullYear()} 簡(jiǎn)疏志 Wrote by Mengjun Guo Built with Docusaurus.`, // 頁(yè)腳底部聲明設(shè)置
      },
    }),
};

module.exports = config;

4. 刪除或者將文件重命名 ./src/pages/index.js，這樣就可以刪除landing page，也就是說(shuō)，一打開(kāi)網(wǎng)站看到的就是博客樣式。

完成以上步驟，一個(gè)博客的基本配置算是完成，在配置過(guò)程中可以通過(guò) http://localhost:3000 實(shí)時(shí)預(yù)覽。

如果想修改博客主題配色，在 /src/css/custom.css 文件里修改?？梢韵韧ㄟ^(guò) Docusaurus 提供的配色測(cè)試工具 預(yù)覽配色，然后復(fù)制顏色代碼到 /src/css/custom.css 里。

所有博文放在 /blog 文件下，博文撰寫(xiě)時(shí)需要注意的格式，可以查閱 Docusaurs 關(guān)于博客的說(shuō)明。

3. 將本地網(wǎng)站推送到 Github

在 Github 上新建一個(gè)倉(cāng)庫(kù)，然后根據(jù)提示將在本地搭建好的網(wǎng)站推送到 Github 上。

4. 部署網(wǎng)站

一開(kāi)始選擇的是 Netlify 來(lái)部署自己的網(wǎng)站，發(fā)現(xiàn)國(guó)內(nèi)訪(fǎng)問(wèn)基本上打不開(kāi)。于是換成了 Vercel 進(jìn)行部署，而且 Vercel 還會(huì)自動(dòng)幫忙弄好 https 的問(wèn)題。部署步驟比較簡(jiǎn)單，Vercel 會(huì)有提示步驟：

1. 將個(gè)人 Github 賬號(hào)和 Vercel 進(jìn)行關(guān)聯(lián)
2. 選擇個(gè)人博客的倉(cāng)庫(kù)進(jìn)行部署

部署完成后，需要將購(gòu)買(mǎi)的域名和 Vercel 進(jìn)行綁定：

1. 進(jìn)入 Vercel 的 Settings > Domains (設(shè)置 > 域名)
2. 選擇 add domain (添加域名)
3. 輸入購(gòu)買(mǎi)的域名
4. 記住 DNS 和 CNAME，示例如下

5. 將 Vercel 上的 DNS 和 CNAME 更新到 GoDaddy 我的域名 > 其他設(shè)置 > 管理 DNS 上。

大功告成！不過(guò)實(shí)測(cè)加載有些慢，后續(xù)有時(shí)間再優(yōu)化國(guó)內(nèi)訪(fǎng)問(wèn)速度。

參考文章：

1. 零成本搭建現(xiàn)代博客指南
2. Vercel 國(guó)內(nèi)無(wú)法訪(fǎng)問(wèn)解決方案
3. Docusaurus 官方文檔
4. 我的配色選擇工具