作為一名想要想找前端實習的即將畢業的學生，我最近意識到擁有個人網頁會使自己的簡歷更容易被注意到。本文主要是我創建過程及個人心得，有些操作我也是第一次，所以難免在解釋中會有錯誤。另外說明一下，我的電腦是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，但是都是按照公司的操作章程來的而並沒有完全搞懂，這個簡易的模版倒是讓我更容易理解其中的道理。接下來我大致講解我的理解。
2019年4月30日更新：本來我使用 gulp 主要是為了壓縮 css、js 文件和避免模版被直接套用，但是后期發現 gulp 帶來的益處不大，還增加了每次運行 gulp 的時間成本，於是就省去了 gulp 的使用和刪了所有 gulp 壓縮后的文件。但是按照前面步驟下載了模版的人，如果模版中有 gulp，建議還是研究學習以下它的使用，有益無害。
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 natives@1.1.6 然后根據終端提示修復一些錯誤即可。
6.3 gulp使用
之前已經提到，運行 gulp dev 后，瀏覽器會自行打開localhost:3000並顯示網頁。每次你修改原js文件並保存后，gulp會自動將之簡化並更新網頁（修改css則不會自動簡化，需要重新gulp dev）。
7. 其他
7.1 網頁多語言設置
如果你想要給你的網站設置多語言，你可以參考我的另一篇文章《HTML界面多語言切換》來進行設置。
7.2 網站統計
如果你想了解你的網站的市場反應，你可以利用百度統計、Google Analytics或別的平台做網站統計，相關入門介紹可以參考我的另一篇文章《網站分析平台：是選擇百度統計，還是Google Analytics呢？》。