SOFTWARE 2023 年 9 月 20 日

新手教學：製作一個Astro 的 Github.io的博客（Astro Air Blog）主題

這篇文章將會是超級簡單。又快速入門的方式，教你如何建立一個 Astro 的博客（前提是Astro Air Blog）主題，不然其他的我都舉雙手投降:D，之所以選用這個主題，是因為乾淨簡潔、又以蘋果為標榜，那怎麼能不用呢。好啦，即將快速入門，你需要三件套（Node.js、Git命令行、Vscode）

SOFTWARE TQGX

廢話少說，我在凌晨02:56分寫這篇文章，想辦法用最簡單的方式教學出來！

上面三個下載完成後，正式進入教學！

首先，讓我們到倉庫，並建立一個新庫

https://github.com/austin2035/astro-air-blog

隨便輸入倉庫名，反正到最後還是要改:P

到剛剛建立好的倉庫，然後找到HTTPS，等等要下載

讓我們開啟命令行，這個時候要輸入

git clone （這是你剛剛獲得的網址）

像我剛剛得到的就是 https://github.com/tqgx/blog.git
也就是 git clone https://github.com/tqgx/blog.git

完成好之後，就會幫你自動儲存在Administrator的資料夾，叫(blog)、因為我倉庫名取Blog

你可以直接把它拉到C槽，或是在改名，隨便都行。

如果不改，我們就可以直接在命令行，輸入 cd blog

像這樣就是代表正確切換了，接著我們輸入： npm install

然後等它跑完，輸入：npm run dev （記好這個指令，之後測試blog，或是更新都要用它，有時就是一個小bug導致博客建不起來）

接著就會跳出 https://localhost:3000/ 的網址，直接用瀏覽器開，就會變這樣

~~因為我有做過設置了，所以別問為什麼不一樣~~ 好，接下來如果完成了，稍微看完，直接在命令行按兩次CTRL + C 即可離開。

登入 VSCODE 的Github帳號（必備）

登入好之後，我們之後才能透過vscode 上傳東西，之後上傳部落格文章都靠它

開啟 VSCODE 直接把整個 blog 資料夾丟進去

然後你就會看到這樣的.md文章，這就是你要寫部落格的文章
不過其他不重要，細節參數設置都是之後在談，我們要把博客架起來最為優先.

找到TERMINAL 輸入 git remote -v

這樣開啟

這裡會顯示你的所有git上傳的資訊，但反正絕對是不正確
看到最前面叫 origin了嗎？我們要刪除它

輸入 git remote rm origin

最前面叫什麼就刪什麼，如果是master，則反之打 git remote rm master

接下來讓我們新增一個 Github.io 的網名：（這也是你之後的網站名稱）

https://github.com/new

規則：你最前面叫什麼，比如我叫tqgx
我後面 Repository name 就一定要輸入 tqgx.github.io （否則你的github.io無法創立）

屬於自己的 Github.io 連結，在命令行輸入：

git remote add origin https://github.com/yourname/yourname.github.io.git

大眼睛，請將上面的yourname地方，替換成自己的
範例：git remote add origin https://github.com/tqgx/tqgx.github.io.git

透過 Git 命令行，上傳剛剛部落格的所有文件

輸入：

git add -A
git commit -m “first commit”
git branch -M main
git push -u origin main

（接下來，等待兩至三分鐘，網站即將建設好！）在瀏覽器輸入網址：https://tqgx.github.io/

這個網址部份，將 tqgx 改成你的名字。例如我叫John，我就打https://john.github.io/

完成！感謝你的閱覽

接下來就靠vscode 自己刪一些文件，在用裡面內建的東西做提交吧。

===================================

以下是一些額外補充：（請仔細看圖片最上面，.mdr就是文件目錄，或是.js）

進階設置之一：設置首頁文章展示首頁默認是按照文章的創建時間倒序排列的。你可以編輯 src/pages/index.astro 文件，修改首頁文章的展示方式。文章的展示布局有三種，第一種是一行展示一篇文章，第二種是一行展示兩篇文章，第三種是一行展示三篇文章。如下入所示，我們可以設置這三種布局的文章數量。

首頁中文章的展示設置這裏的 allPosts 表示所有文章，而 slice(0, 1) 表示從第 1 篇文章開始，到第 2 篇文章結束（但是不包括第 2 篇文章）。這樣，我們就設置了第一種布局是展示了最新文章。同樣的，我們可以設置第二種布局和第三種布局的文章數量。我這裏設置的分別是 slice(1, 5) 和 slice(5, 11)。這樣，我們就設置了第二種布局是展示了第 2 篇到第 4 篇文章，第三種布局是展示了第 5 篇到第10 篇文章。更多文章的設置，也是同樣的道理。

-首頁中「更多文章」的設置

如何插入：像我文章的 Back 鍵？

同樣在src/layouts/MarkdownPost.astro，有空格預留處的地方，插入以下代碼：

  <section class="more-from-newsroom">
    <div class="section-content">
      
   

      <ul role="list" class="section-tiles">

      </ul>
      <div class="view-archive-wrapper">
        <a href="/" class="cta-primary-light" data-analytics-region="router" data-analytics-title="view archive">Back</a>
      </div>
    </div>
  </section>

如何插入：Disqus 留言版？

同樣在src/layouts/MarkdownPost.astro 進入這篇教學文章：

插入Disqus評論 → 到 Astro-air-blog 主題中

部份內容引用：Astro Air Blog 详细使用指南

https://yufengbiji.com/posts/astro-air-blog-guide

留言板

Utteranc

Giscus

感謝您的閱讀。歡迎分享TQGX部落格(tqgx.github.io)的文章，引用轉載請上註明網址並遵守：創用CC-姓名標示-非商業性-禁止改作 4.0 國際授權條款。如需商業使用請來信告之。

Back