程式教學

前言

大家好！又是我，摸書士！今天想要跟大家分享「如何用最少的費用創建屬於自己的形象網站」！
在那之前，先聲明一件事，就是這個做法一般而言僅限於靜態網頁，而無法使用動態網頁，那什麼是靜態網頁呢？簡單來說就是你沒有後台，無法使用如註冊、登入、購物車、留言、搜索等等的功能。

順帶一提，我的部落格是靜態網頁，但為什麼可以留言跟搜索？這就要感謝 Waline 這個後端評論系統了！他提供了後台，讓留言得以出現在靜態網頁上。而搜索功能則有勞 Algolia search，他是透過生成所有文章中所有的字來進行搜索的，看起來長這樣。

View post on imgur.com

以上都是基於 HEXO 這個部落格的基底所衍生出來的外掛模組，本篇都不會講到，本篇只會教你如何建立如 書士．作品集 這樣的靜態網站

所需工具

⭐Github
他的用途很多，但今天是用於放置你的網頁內容，他是你無須購買虛擬機即可建置網頁的關鍵，我們會建立一個儲存庫並將你的網頁放在裡頭，因此請務必申請一個帳號！
⭐git bash
setup.exe容量：大約 47 Mb
這是命令行介面工具，讓我們可以執行如「將資料夾內容上傳到Github儲存庫」或「將更新內容覆蓋舊內容」之類的指令，如果你想要直接拉到儲存庫也沒有不行，取決於你想怎麼做。
⭐Visual Studio Code
setup.exe容量：大約 79 Mb
編寫網頁內容的關鍵，這個軟體是工程師們的最愛，他可以編寫許多語言做許多事，但這邊不細說，總之我們會利用這個軟體幫助你編輯網站。
⭐goDaddy
用於購買網域，我的網域只花了我 70 元新台幣，當然這只是第一年的價格，第二年的價格為 700 多台幣，由於我的網域後綴是.xyz，所以比較便宜，但是如果你選擇的是.com 或.tw可能就會比較貴。
⭐html5up
容量：根據你的選擇有所不同，但壓縮檔通常不超過2Mb
這是有需多模板的地方，根據你的需求，選擇適合你的模板，利用該模板進行改造，變成屬於你的網站，html5up的存在為你省下了許多時間，你可以點選 LIVE DEMO，馬上知道他在網站上看起來是甚麼樣子，還可以看網站在 PC(桌機、筆電等等)、Mobile(手機)、或是平板等不同裝置中看起來會是甚麼尺寸跟甚麼外觀。

以上工具為你提供了許多的便利性，請感謝他們٩(｡・ω・｡)و

Github建立儲存庫

當你建立好 Github 帳號後，請點選左上角的三條線，點 HOME，你會來到以下這個頁面，左邊有一棵綠綠的按鈕寫著 NEW，點他，就好了！
alt text
再來你會看到這個頁面，開始為你的儲存庫取名(Repository name)，取名很重要，邏輯是 [用戶名.github.io]，以我的為例，我的用戶名為 magicboy0409，那就是 magicboy0409.github.io
完成後，點選右下角的綠色按鈕 Create repository 就好了！
alt text
接下來就會看到以下這個畫面，代表儲存庫建立完成了！現在讓我們來寫網站吧！
alt text

html5up選擇模板

選擇一個模板，點選 Free Download，會下載一個 zip 檔，順便推薦一個我很喜歡用的解壓縮軟體，叫做 Bangzip，我之前遇到解壓縮後因為編碼問題導致檔案名稱不正確進而無法讀取時，我的好朋友呱呱為我找到的解決方案，我們一起底下留言謝謝呱呱。
解壓縮時請務必選擇「自動解壓縮至此」，否則檔案會散落在你所在的位置，不過也不用擔心，你只要 Ctrl+Z 就可以了！
接下來你會解壓縮出一個資料夾，並且他的名稱是一段很長的英文跟數字，右鍵這個資料夾，點選 重新命名 ，為這個資料夾 用英文 重新命名成 簡單好懂 的名稱(用中文的話有機會因為編碼問題而導致一些奇奇怪怪的錯誤)。

恭喜你！可以開始編寫你的網站了！

Visual Studio Code編寫網頁

簡稱 VS code，記得在安裝時要勾選「在桌面建立捷徑」的按鈕，但是如果忘記勾選了，也沒關係！你可以從工具攔中的搜尋功能輸入visual，應該就會出現了！
alt text
用右鍵點擊他，並點選「開啟檔案位置」，然後你會來到他所在的位置，正常來說會只有一個檔案，右鍵點選他，選取「傳送到」，選擇 「桌面(建立捷徑) 」，就好了！

打開 VS Code，點選左上角的「File > Open Folder」，然後點選你從html5up下載並改名的那個模板的資料夾，點一下然後直接按「選擇資料夾」
alt text

那麼接下來就跟程式有關聯了，首先先來介紹一些基本的東西

基本結構

我們可以看到左邊的檔案跟資料夾包含了assets、images、index.html、LICENSE.txt 跟 README.txt
alt text

  • assets
    裡面還包括了 css、js、sass、webfont等等的資料夾。
  • images
    用來存放圖片的一個地方，在你的網頁上所需要的圖都請務必放進這裡！
  • index.html
    最主要的網站，接下來你將在這個地方編寫你的網站內容
  • LICENSE.txt
    執照，寫了關於使用範圍，基本上只要是自用的就不會有事。
  • README.txt
    一些作者想說的話跟一些感謝名單。

你還可能用到的

  • css
    css 會有設置外觀的程式碼，本篇不會細講，但如果你有需要改變一些顏色之類的，你可以在 index.html 中，透過「ctrl+F」並搜尋「stylesheet」，通常後面會有 href="assets/css/main.css" 的一串程式碼，assets/css/main.css就是控制外觀樣式的css檔案名稱跟他的路徑，根據不同模板可能會有不同路徑，請按照你的模板的路徑去找。
    在你想設置外觀的地方，往前找第一個寫有 class 的地方，將 class 後面的類別名稱複製，比方說我想要更改 name 的外觀，那麼我就需要找到 name 前面的第一個 class，這裡是 field half，將這一段複製起來，到 main.css 中，用 ctrl + F，貼上，這時候你會發現什麼都找不到，那是因為 field half 實際上是兩個類別混和在一起的，所以正確的打法應該是field.half，這樣就能找到了！
    ❗ 注意！更改該類別的內容後，所有套用該類別的地方的外觀都會一併變更。
1
2
3
4
5
6
7
8
9
10
11
<div class="fields">
    <div class="field half">
		<input type="text" name="name" id="name" placeholder="Name" />
	</div>
	<div class="field half">
		<input type="email" name="email" id="email" placeholder="Email" />
	</div>
	<div class="field">
		<textarea name="message" id="message" placeholder="Message" rows="7"></textarea>
	</div>
</div>
  • js
    java script，通常是用來編寫一些腳本用的，比方說開啟擬態視窗，YouTube 打開通知的那個地方就是，他會在同一個頁面打開另一個小視窗，他都寫在同一個 html 中，但只有在用戶點擊某個按鈕後，才會打開擬態視窗。除此之外他可以做許多事情，但這篇主要是為沒有程式基礎的人所寫的，所以不多說用法。
  • favicon
    如果你想為你的網站新增一個標誌性的 LOGO 或圖標，你可以在資料夾中直接放入一個名為 favicon.ico 的圖案，作法也很簡單，先準備好你的圖片，請務必是正方形的，然後用以下的icon產生器網站生成，將生成後下載的 .ico 檔案直接放在資料夾的最外層就好。
    icon產生器
    像我的 icon 就是我的 LOGO
    alt text

內容

在你的資料夾中，同樣也會有一個 index.html 檔案，點開他，你的瀏覽器會顯示你的網頁內容，每當你在 VS Code 中編輯到一個段落時，記得按下 Ctrl + S 進行存檔，並在瀏覽器中按下 F5 重新整理，就能看到最新的內容了！
❗ 如果 F5 不管用的話，可以嘗試 ctrl + F5

那麼內容就根據你的需求進行更改，通常都是白字以及網址需要更改，對應你瀏覽器上顯示的內容來比對，一個一個慢慢改，包含你的標題，那是顯示在分頁框上的，那以下是幾個你可以會用到的更改。

網址

透過修改 href 中的內容，來變更目標網站。

1
<a href="https://scribes.magicboy.xyz/">關於一位摸書士</a>

如果你希望點擊後不是直接跳到目標網站，而是開啟新的分頁，你可以多加 target="_blank"

1
<a href="https://scribes.magicboy.xyz/" target="_blank">關於一位摸書士</a>

圖片

透過修改 src 的路徑中的檔案名稱來顯示你想要的圖片，記得要包含後綴，比方說 .jpg 或 .png。

1
<img src="images/pic01.jpg" alt="" />

如果你希望游標停在該圖片上時，會有小字跑出來，可以增加title="我是小字"

1
<img src="images/pic01.jpg" alt="" title="我是小字" />

註解

如果你有甚麼地方不想要顯示，又不想刪掉，你可以用<!--(註解內容)-->來註解

1
2
3
<!--
<img src="images/pic01.jpg" alt="" title="我是小字" />
-->

以上可以花很多時間玩！如果有想要什麼效果卻做不出來的話，可以底下留言，我會請其他程式大佬來教你。
那麼當你建立好一個網頁後，我們就要推上你的 Github 儲存庫了！

Git Bash推送檔案

現在在你的資料夾中，右鍵，你會看到一個 Git Bash Here，點他，將會開啟一個視窗，我們將要在這個視窗中輸入指令，把我們的網站推送到 Github 上了！
接下來的所有動作，簡單來說就是，將你電腦裡的檔案新增到索引，並從索引提交到本地儲存庫，再從本儲存庫推送到遠端數據庫。
好的，我知道聽起來有點複雜，所以我要你想像你現在要去 7-11 送貨，首先你會將貨物放進包裝盒裡面，再把包裝盒拿去離你家最近的 7-11，這間 7-11 會幫你把貨物送到遠方的 7-11。
將貨物放進包裝盒就是將電腦檔案新增到索引，把包裝盒拿去離你家最近的 7-11，就是把索引的內容提交到本地儲存庫，而將貨物送到遠方的 7-11 就是從本地存庫推送到遠端儲存庫。
我們來看具體如何操作吧！

1.在當前的資料夾初始化一個 Git 儲存庫，使該資料夾可以進行版本控制。
$ git init

2.設定一個遠端儲存庫，命名為 origin，對應到 GitHub 上的 repo。
$ git remote add origin https://github.com/(你的用戶名)/(你的用戶名).github.io.git

  • 在此步驟可能會要求你登入，就輸入帳號密碼登入就好！
  • git remote add只能用來新增遠端，如果之前已經設定過 origin，這條指令會報錯，如果你需要修改，可以先刪除原本的 origin，然後再按照以下方式重新設定。

$ git remote remove origin
$ git remote add origin https://github.com/(你的用戶名)/(你的用戶名).github.io.git

3.確保 origin 設定正確，輸入這個指令後，會顯示目前設定的遠端儲存庫的網址。
$ git remote -v

4.檢查有哪些檔案變更、未追蹤或修改過了但還沒有提交之類的資訊
$ git status

5.將所有你新增、修改的檔案放入 Git 的暫存區
$ git add .

  • 記得一定要加點點，.這個點點.，我知道他很小，很容易忽略(受害者在此,,Ծ‸Ծ,,)。
  • 如果你本地的某個檔案刪除了，這時候又將整個資料夾放進暫存區，推送時，該檔案也會被刪除。
  • 如果你只想加入某個檔案，可以用git add (檔案名稱.後綴)，不小心加入了不想提交的檔案，使用git reset HEAD (檔案名稱.後綴)。

6.將加入暫存區的內容提交到 Git 的本地儲存庫。
$ git commit -m (你的更新內容簡述)

7.將內容推送到遠端儲存庫的 origin
git push -u origin main

  • 第一次推送需要這樣，之後推送的話可以只用git push來推送。
    8.列出所有分支的指令

$ git branch

如此一來，你就成功地將你的網站推送到 Github 上了！恭喜！

在你的電腦裡的該資料夾上，也會有一個名為.git的隱藏資料夾，從資料夾上方點選「檢視」，然後點選「副檔名」底下「隱藏的項目」，就可以看到了！
alt text

goDaddy設定網域

你唯一需要花錢的地方
從 goDaddy 註冊一個帳號，然後選擇一個你喜歡的網域名稱並購買，以 youtubehub 為例
alt text
可以看到 .xyz 第一年是台幣 75 元，但是看下圖
alt text
他從第二年就會變回原價 761 元。

當然如果說你第二年使用別的網域，也可以以便宜的價格買到！
他說保護或什麼的那些都不用，你第一年只會花購買網域的錢。

購買完之後，讓我們來設定 DNS！
首先，從 這裡 開始，點選右上角的 ID 名稱，點選 我的產品，點選你的企業底下的 你的網域，點選左邊寫著儀表板底下的 網域，再來你會看到續約之類的資訊，下面會有三個小框，其中一個就是 管理DNS。

DNS 添加紀錄

DNS，網域名稱系統，Domain Name System，作為將域名和IP位址相互對映的一個分散式資料庫，能夠使人更方便地訪問網際網路。
1.點擊 新增紀錄，會讓你填寫四個內容，分別是 類型、名稱、內容值、TTL。

2.這裡我們只會用到 CNAME，所以選擇 CNAME。

3.然後 名稱 請輸入一段英文，他是你的子域名，比方說我的部落格的網址是 blog.magicboy.xyz，我的子域名就是blog。

4.內容值 輸入 (github的用戶名).git.io

5.TTL 選擇 1/2小時。

Github 設定

接下來在你的電腦上的網頁的資料夾中，右鍵，新增，文字文件，會建立一個txt檔，取名為 CNAME，在文件裡面輸入https://(子域名).(網域)，以我的為例，我會在裡面輸入 https://blog.magicboy.xyz。
然後儲存，關掉，接下來右鍵 CNAME.txt，點選 重新命名，將檔名中的 .txt 給刪除，只留下 CNAME。
❗ 如果要再編輯內容的話，只需要再把 .txt 加回去就好！

好的！現在讓我們再練習一次推送資料到 Github！將 Git Bash推送檔案 中的步驟 5 ~ 7 再做一遍就行了！

最後，回到你的 Github 的儲存庫，點選最右側的 Settings
alt text

進去後點選左側的 Page
alt text

正常來說 DNS 掃描需要一段時間，如果他掃描好了，你會看到他寫 你的網站已經在(網址)上線了 等等的內容，你可以在下方的 Custom domain 中看看輸入框中是否有你的網域名稱。
❗ 請務必拉到 Page 頁面最底下，將 Enforce HTTPS 打勾，很重要！
HTTP 是沒有加密的，使用 HTTPS 會對訪問網站的人更加安全，大家會更願意瀏覽你的網站！

如此一來，你就能夠透過你的網址來造訪網站了！

額外功能

以下會介紹一些你還可能用到的功能

縮圖

如果你在 Discord 或是 LINE 中發送網址，如果沒有以下設定的話，就只會有網址而沒有縮圖跟簡介，所以這裡要教大家如何做出如下的縮圖
alt text
基本上複製以下的內容去修改就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--縮圖-->
	<meta name="description" content="Gura餵食模擬器" />
	<meta property="og:title" content="來餵食Gura！" />
	<meta property="og:description" content="Gura很餓，已經迫不及待把蝦蝦們給吃了(？" />
	<meta property="og:image" content="你的圖片路徑(ex. images/pic01.png)" />
	<meta property="og:url" content="https://scribes.magicboy.xyz/game/eatgame/" />
	<meta property="og:type" content="website" />

	<meta name="twitter:card" content="你的圖片路徑(ex. images/pic01.png)" />
	<meta name="twitter:title" content="Gura餵食模擬器" />
	<meta name="twitter:description" content="Gura很餓，已經迫不及待把蝦蝦們給吃了(？" />
	<meta name="twitter:image" content="你的圖片路徑(ex. images/pic01.png)" />
	<meta name="twitter:url" content="https://scribes.magicboy.xyz/game/eatgame/" />

Discord 個人資料添加網站

下圖可以看到，Discord 也能添加自己的網站，但是你需要證明那是你的網站，你只需要用 DNS 掃描，或是在你的資料夾中加入 .well-known 資料夾，並依照我們添加 CNAME 檔案的作法，在 Discord 中從設定頁面中點選連結，並選擇Domain，把 discord.txt 中填入 Discord 提供的 內容，內容可能是 df 開頭的，儲存後把 .txt 去掉，再推送到 Github。
alt text

其他的模板網站

除了 html5up 之外，也有其他提供模板的網站，有些可以完全由自己掌控，有些則由該網站替你保存並且有些功能需要付費。比方說 WIX，他提供了很不錯的功能，讓你就算對程式不熟悉，也能透過可視化的介面讓你編輯網站。
但是如同下圖所看到的，他需要付費。
alt text

當然如果你錢夠多也可以這麼做，但我個人更喜歡能盡可能自己掌控！也可以花比較少的錢。

客製化游標

如果想要讓游標在你的網頁上是特別的，你可以上網搜尋其他人製作的游標，然後依照他們的游標來設計，如果沒有修圖軟體也沒關係，我們可以用 線上版Photoshop！
同樣都是免費的，編輯好你的游標，將他放進 images 資料夾中，然後在你的 main.css 裡放入以下代碼，auto 的部分是一般的游標(一般來說是一個箭頭)，pointer 就是當你在碰到按鈕之類的地方，會出現的游標(一般來說是一隻手伸出食指，你可以學 GTA 的網站放一個伸出中指的手)
然後從你的代碼中，尋找 第一個出現的div，比方說<div id="wrapper">，在這個地方加入class="custom-cursor"，最後會是<div id="page-wrapper" class="custom-cursor">

1
2
3
4
5
6
7
8
9
10
11
/*游標*/
	<style>
		.custom-cursor {
			cursor: url(images/cursor.png), auto;
		}

		a:hover {
			cursor: url(images/cursorpointer.png), pointer;
			/* 更換游標圖片的路徑 */
		}
	</style>

邏輯

html 的邏輯是這樣的，他就像是俄羅斯娃娃，一層包一層，那你可以透過縮排來知道他在哪一層，你會發現 VS code 左邊都會有很多線，在同一條線上的就會是同一層，而往內縮就是下一層，再往內縮就又是下一層。
所以當你要編輯樣式之類的東西的時候，先從同一層或是上一層找控制他的元素，會比較好找！

結語

一開始覺得複雜其實不要緊，這種東西就是做久了，就會越來越熟練！我今年也才學了第四年，以上這些工具都是我在沒有太多預算的時候所發現的，也有許多技術是我的工程師好朋友跟我分享的，很感謝他們，也很感謝這些工具。
早期要寫程式不是一件簡單的事，但如今科技發達，要做什麼都能夠變得很更容易取得資源，人類應當是越來越全能，取決於是否開始行動！

最後感謝大家看完這一篇製作網站的教學，希望你能學會，我只是一個程式小萌新，有什麼解釋不清楚或是講錯的，請在下方留言區糾正我，非常感謝 (ﾉ>ω<)ﾉ
那我們就下一篇文章見了！

說些話吧！

waline