【Hugo+Netlify】制作英文學(xué)術(shù)個(gè)人簡(jiǎn)介網(wǎng)站（一）：基礎(chǔ)版

時(shí)間：2023-07-24 10:12:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-24 10:12:02 來源：網(wǎng)站運(yùn)營(yíng)

【Hugo+Netlify】制作英文學(xué)術(shù)個(gè)人簡(jiǎn)介網(wǎng)站（一）：基礎(chǔ)版：未來還是計(jì)劃出國(guó)讀讀書，學(xué)長(zhǎng)建議留學(xué)申請(qǐng)的時(shí)候最好搞個(gè)英文的個(gè)人簡(jiǎn)介網(wǎng)站。碰巧這兩天沒事干，就根據(jù)大佬推薦的Hugo+Netlify試著搭建了一個(gè)基礎(chǔ)版的。因?yàn)橐郧坝肎itpages+JekyII搭過一個(gè)博客網(wǎng)站，所以算有點(diǎn)經(jīng)驗(yàn)吧。下面先介紹一下主要工具：

Hugo和Academic介紹

Hugo和Hexo、JekyII一樣都是靜態(tài)網(wǎng)站生成器，但Hugo是用Go語言編寫的，它更快速，更現(xiàn)代，使用起來也更方便簡(jiǎn)單。

Hugo官網(wǎng)：

Hugo提供了很多主題，但由于咱是想留學(xué)申請(qǐng)，所以找到了一個(gè)比較學(xué)術(shù)的主題Academic。

Academic官網(wǎng)：

與其說Academic是一個(gè)主題，不如說它是基于Hugo的一個(gè)網(wǎng)站框架。其中包含很多可高度定制化的widgets（窗體小部件），比如：Project，Experience，Publication等。目前Academic在全球已經(jīng)廣泛使用，包括創(chuàng)作者George Cushen本人、帝國(guó)理工學(xué)院某實(shí)驗(yàn)室、斯坦福大學(xué)某實(shí)驗(yàn)室：

可以看到他們的網(wǎng)站都十分精美！

Netlify和Github介紹

Netlify是一個(gè)提供Web項(xiàng)目托管的平臺(tái)，支持Github、Gitlab、Bitbucket等平臺(tái)的項(xiàng)目，這里我們主要提供Netlify來部署我們的網(wǎng)站，并且自動(dòng)發(fā)布最新的網(wǎng)站更改，其次Netlify還提供免費(fèi)的二級(jí)域名。

Github就不多提了，這次搭建網(wǎng)站其實(shí)就是把Academic的模板clone到本地，改一下相關(guān)的配置，push更新到GitHub的倉庫，讓Netlify自動(dòng)部署就行。

搭建步驟（一）：創(chuàng)建倉庫并完成Netlify初始化

首先我們進(jìn)入

可以看到安裝方式有很多種，我們選擇最簡(jiǎn)單的也是推薦的方式：一鍵安裝

然后看介紹，一鍵安裝會(huì)在Github的賬號(hào)里面自動(dòng)生成一個(gè)倉庫，點(diǎn)擊紅色框：

跳轉(zhuǎn)到Netlify的網(wǎng)站，按照步驟輸入賬號(hào)授權(quán)一下就行：

然后給倉庫起個(gè)名字，我起的是Homepage，這里是第二次建立，就按照默認(rèn)的來吧：

半分鐘左右就創(chuàng)建好了，跳轉(zhuǎn)到初始化的部署部分，第一次部署需要一點(diǎn)時(shí)間，等部署好了就進(jìn)入第二步，設(shè)定域名：

這里建議到騰訊云購買域名，續(xù)費(fèi)比較便宜，除了沒有.me域名其他都很不錯(cuò)，點(diǎn)擊第二步，輸入自己的域名：




由于之前我搭建過一遍了，所以它顯示不能重復(fù)使用：

后面的步驟就先略過，直接跳到初始化完成后吧。

搭建步驟（二）定制自己的網(wǎng)站

完成域名和證書的綁定后，瀏覽器輸入我們的域名應(yīng)該顯示的是默認(rèn)模板，長(zhǎng)這樣：

這只是個(gè)模板，接下來就要開始定制自己的網(wǎng)站了，可以跟著官方的文檔來：

但官方的文檔太長(zhǎng)了，有些地方用不到，我就簡(jiǎn)略地說一下哪些地方需要改吧。打開clone的倉庫到默認(rèn)配置的目錄：

其中params.yoml和menus.toml需要修改，首先打開params.toml：

感覺夜晚模式不需要，又不是來敲代碼。。。所以我設(shè)置成了false。右上角的搜索按鈕我也不想要，就把search engine改成了0：

然后是Contact部分的內(nèi)容：

把地點(diǎn)，經(jīng)緯度（用于地圖顯示），聯(lián)系方式都改成自己的。地圖的顯示可以用默認(rèn)的Mapnik，但前兩天美賽的時(shí)候接觸了下Mapbox，所以我改成了Mapbox：

menus.toml這個(gè)文件主要定義了頂部的菜單欄：

這個(gè)要根據(jù)后面自定義內(nèi)容的時(shí)候來刪減，簡(jiǎn)而言之就是窗口widget的權(quán)重越高就排在越后面：

第三步就來自定義內(nèi)容，可以看到模板里面包含了Projects、Publications一堆東西，像我這樣沒發(fā)過論文的就還是先把這些模塊刪除了吧。這些widgets位于：

隨便打開一個(gè)，看看里面有什么：

紅色框部分比較重要，active設(shè)置為false它就不會(huì)出現(xiàn)了，權(quán)重越高它就出現(xiàn)在頁面的越下面。順便提一句，本來md文件應(yīng)該用Typora之類的Markdown編輯器打開的，但是這個(gè)toml寫法的md文件在Typora里面顯示的太丑了，還是用VScode打開比較好看。

1. 把需要?jiǎng)h除的widget的active設(shè)置為false，最后來改一下Biography部分，這個(gè)部分是在：

打開_index，把里面的內(nèi)容換成自己的：

改好后把新的倉庫push到GitHub，Netlify會(huì)自動(dòng)部署好新的網(wǎng)站。這樣一個(gè)基礎(chǔ)版的英文學(xué)術(shù)個(gè)人簡(jiǎn)介網(wǎng)站就建好了！當(dāng)然這只是基礎(chǔ)版的網(wǎng)站，也就顯示個(gè)Biography，還有Skills之類的，我打算把項(xiàng)目的視頻（沒錯(cuò)就是大一做的那個(gè)憨憨ROS車）放上去，但好像沒有提供現(xiàn)成的widget。不過學(xué)下Html+CSS和Hugo的使用后應(yīng)該不成問題，等把想要實(shí)現(xiàn)的功能全部搞定后會(huì)發(fā)（二）進(jìn)階版。