作為一名想要想找前端實習的即將畢業的學生，我最近意識到擁有個人網頁會使自己的簡歷更容易被注意到。本文主要是我建立過程及個人心得，有些操作我也是第一次，所以難免在解釋中會有錯誤。另外說明一下，我的電腦是Mac系統。

1. GitHub賬戶

首先，你需要擁有一個GitHub賬戶。相信大部分搜尋關鍵詞看到這個文章的讀者應該都已經有了GitHub賬戶或是別的Git賬戶吧。附上GitHub Pages官網連結https://pages.github.com/，大家需要像連結中的指示一樣建立一個repository並clone到自己的電腦上，當然，你也可以將本地的資料夾上傳至你新建的repository。這個repository名字應該為yourname.github.io，yourname改為你賬戶名字，如果取別的名字，會使你的預設網站域名多一字尾，然後使你後來的自定義域名出現問題。目前我還不知道是否可以使用別的名字作為repository併成功自定義域名。

2. Bootstrap Themes模版

現在你可以在repository裡新增內容了。我推薦使用Bootstrap這個最流行的前端框架，它有一些很美觀的主題模版可以免費拿來使用（附上鍊接：https://startbootstrap.com/template-categories/all/）。

我比較推薦下面這兩個主題（之後我用右邊這個主題作為例子）：

下載並解壓檔案之後，將其中的有用的檔案都複製至你clone的GitHub資料夾或是你準備上傳至GitHub的空資料夾中。接下來，你push至你的資料夾。至於哪些檔案是有用的，我在之後會提到，目前你可以全部上傳先試一試效果。

3. GitHub Pages

在你的相關repository中的選單欄有一個setting選項，點選後你能找到關於GitHub Pages配置的選項，其中你只需要選擇source中的你的網頁程式碼所在的分支就能夠配置成功了。點選儲存你就會看到綠色的提示語並且提供了連結，點選後你就能看到你上傳的網站了。

4. Atom編輯器

之前我在公司實習前端的六個月一直用的是Sublime Text編輯專案程式碼，但我在做個人網站時偶然間發現了Atom這個更好用的工具。（附上官網連結：https://atom.io/）

Atom下載後已經預設與GitHub關聯，所以你在這個編輯器裡就能直觀地看到你做過的本地修改，如下圖，修改過的程式碼會使相關行號左側、相關檔名、相關資料夾都有黃色標記。右側你還能直接commit和看到歷史記錄等相關的操作。Atom還有一個看起來很棒的功能，就是可以多人同時修改同一檔案，效果類似於Google Doc線上多人修改文件，這樣就能避免git時產生衝突了，不過這個功能和建立個人網站沒有太大關係，畢竟這是個人網站。

5. 自定義域名

你需要先購買一個域名，我是在name.com上購買了.com結尾的域名。購買成功後在name.com賬戶裡Edit DNS Records，新增

(1) CNAME，主機記錄寫@，後面記錄值寫上你的xxxx.github.io
(2) CNAME，主機記錄寫www，後面記錄值也是xxxx.github.io

最後，參考官網指導，在GitHub的setting裡的GitHub Pages直接新增你的自定義域名，不用加http, www等，下面的https的選項可以選上，等幾分鐘後你就可以用自定義的域名開啟網站了。

6. npm, gulp

在下載的模版中有readme檔案，建議閱讀。其中提到了想要更深層的使用需要操作 npm install 和 gulp dev 。我之前實習的時候遇見過gulp，但是都是按照公司的操作章程來的而並沒有完全搞懂，這個簡易的模版倒是讓我更容易理解其中的道理。接下來我大致講解我的理解。

如果你對npm，gulp都不熟悉並且對模版已經很滿意的話，那你可以嘗試只修改html中內容，但是我相信對於大多數人來說，你依然想要自己修改css和js檔案以達到更好的效果。

6.1 為什麼要用npm，gulp？

這時候你會發現css資料夾下有一個grayscale.css和grayscale.min.css，js資料夾下有一個grayscale.js和grayscale.min.js，index.html中引用的是那兩個帶min的檔案。你可以發現有一個檔案gulp.js是用來定義 gulp dev 操作的，稍微研究一下就不難發現其中有定義如何把css變min.css和js變min.js的。其實帶min的兩個檔案並沒有改變檔案的性質，只是簡化了檔案（比如將所有沒有實際影響的空格刪去了，所有程式碼都在同一行），使網頁執行得更快也減少了錯誤的產生，但是這樣的檔案不利於開發時修改，這時候我們就需要修改原有的css和js檔案再利用gulp進行簡化。gulp dev是模版提供的一個task集合，你執行這一句話相當於同時完成所有在gulp.js中定義的別的gulp操作，建議研究一下gulp.js檔案。附上一個簡單的如何用gulp簡化CSS和JavaScript教程的連結。當你弄明白如果簡化css和js後你就可以將簡化前的檔案從github上刪掉了，並在.gitignore中新增原始檔案的名字。

6.2 npm，gulp安裝

如果你從來沒有使用過npm和gulp，那你需要先安裝。如果你不確定你的電腦是否已安裝他們，則使用 npm -v 和  gulp -v 來檢驗，如果輸出了版本號則表示已安裝。

如果你搜索install npm，你會找到npm的官網，其中有一個連結點選後就能直接安裝，然後雙擊下載的安裝包就能安裝成功了。但是這種方法很容易導致未來出現EACCESS: permission denied錯誤，所以我推薦你直接用另一種方法下載npm：利用 node version manager (nvm)下載npm。也就是說先下載nvm再下載npm，具體操作可以參考我的另一篇文章。下載npm成功後操作 npm install 

然後，按照這個網站中的指令安裝gulp，就是下面的三句：

npm install gulp-cli -g
npm install gulp -D
npx -p touch nodetouch gulpfile.js

這時候執行 gulp dev ，如果順利的話，你的預設瀏覽器就會開啟localhost:3000的介面顯示你的網站。你也可能會出現下列錯誤：

這時候你就需要操作 npm install [email protected]1.1.6 然後根據終端提示修復一些錯誤即可。

6.3 gulp使用

之前已經提到，執行 gulp dev 後，瀏覽器會自行開啟localhost:3000並顯示網頁。每次你修改檔案並儲存後，網頁會自動更新。