 自微信推出公眾號(hào)后,，無(wú)論是博客時(shí)代就開始寫作的人,，還是后來(lái)有志于投身新媒體的人，都紛紛注冊(cè)了自己的賬號(hào),。 公眾號(hào)首創(chuàng)的原創(chuàng)保護(hù)和贊賞機(jī)制,，讓它成了許多內(nèi)容生產(chǎn)者喜愛的一個(gè)平臺(tái)。 但如果你經(jīng)常使用公眾號(hào),，可能會(huì)發(fā)現(xiàn)它也存在一些限制：不能跳轉(zhuǎn)到外部鏈接,、新開的公眾號(hào)沒有留言功能等。 而這些限制,，對(duì)于博客來(lái)說(shuō),，是不存在的。 即便博客時(shí)代已經(jīng)遠(yuǎn)去,，但如果你還想寫博客,，想體驗(yàn)一下像工程師輸入第一行代碼Hello World的感覺，那么,，從此刻開始,，動(dòng)手搭建一個(gè)自己的博客，還是值得的,。 注：本文適合無(wú)代碼基礎(chǔ)的小白選手,，因?yàn)槲乙彩菑牧汩_始學(xué)起的。 01.博客最終效果 在說(shuō)如何搭建博客之前,，我們先來(lái)看一下我搭建的博客： 目前首頁(yè)有兩篇文章,，內(nèi)容有些單薄，但頁(yè)面整體設(shè)計(jì)得比較簡(jiǎn)潔,，是我喜歡的類型,。如果你對(duì)這個(gè)頁(yè)面不太滿意，還可以使用其他的博客主題,，更換主題也非常方便,。 下圖是博客文章的內(nèi)頁(yè)，兩側(cè)留白設(shè)計(jì),，文字的大小和行間距設(shè)置得比較合理,，閱讀的時(shí)候看起來(lái)也比較舒服。 博客在手機(jī)上也進(jìn)行了很好地適配，想要了解博客在手機(jī)上的閱讀體驗(yàn),，可點(diǎn)擊文章底部的 {閱讀原文} ,。 02.搭建博客的前期準(zhǔn)備 ① 注冊(cè)Github賬號(hào) 打開Github官網(wǎng)，使用郵箱注冊(cè)Github賬號(hào),，注冊(cè)時(shí)請(qǐng)謹(jǐn)慎設(shè)置自己的用戶名,，因?yàn)橛脩裘竺鏁?huì)成為博客域名的一部分。 獲得了Github賬號(hào)后,，點(diǎn)擊左側(cè)的Create a repository,，創(chuàng)建一個(gè)倉(cāng)庫(kù)，用于存放博客的相關(guān)數(shù)據(jù),。 在設(shè)置倉(cāng)庫(kù)名稱時(shí),，它的格式是固定的，采用「用戶名.github.io」的格式,，因?yàn)檫@個(gè)倉(cāng)庫(kù)名稱就是博客的域名(地址),。 如下圖，我的用戶名為angola95,，因此倉(cāng)庫(kù)名為「angola95.github.io」,。 設(shè)置好倉(cāng)庫(kù)名稱后，勾選Initialize this repository with a README,，最后點(diǎn)擊底部的Create repository,，就完成了倉(cāng)庫(kù)的創(chuàng)建。 創(chuàng)建好倉(cāng)庫(kù)后,，點(diǎn)擊右上方的賬號(hào)頭像,，選擇Settings。 在設(shè)置菜單中,，按照Developer settings--Personal access tokens的路徑進(jìn)入,，點(diǎn)擊右上方的Generate new token。 在New token設(shè)置頁(yè)面,，Note輸入對(duì)Token的描述或備注，勾選下方的repo,。 最后將頁(yè)面拉至底部,，點(diǎn)擊Generate token，就會(huì)生成一串由數(shù)字和字母組成的字符,，這就是剛剛生成的Token,。 有的小伙伴可能會(huì)問(wèn)，這個(gè)生成的Token有什么用,？請(qǐng)接著往下看,，你可能就明白了。 ② 安裝Git Git是一個(gè)分布式版本控制軟件，方便多個(gè)開發(fā)者同時(shí)為一個(gè)項(xiàng)目貢獻(xiàn)代碼,，彼此間互不影響,，大大提高了團(tuán)隊(duì)合作的效率。 Git的數(shù)據(jù)庫(kù)分為遠(yuǎn)端數(shù)據(jù)庫(kù)和本地?cái)?shù)據(jù)庫(kù),，我們?cè)贕ithub上創(chuàng)建的倉(cāng)庫(kù),，可以看成是博客的遠(yuǎn)端數(shù)據(jù)庫(kù)，而本地?cái)?shù)據(jù)庫(kù)就是我們使用的電腦,。 使用Git,，能將我們?cè)诒镜仉娔X寫的博客內(nèi)容，自動(dòng)地推送到遠(yuǎn)端的Github上,，而連接本地和遠(yuǎn)端數(shù)據(jù)庫(kù)的橋梁,，就是前面生成的Token。 Git支持Win,、macOS和Linux三大平臺(tái),，下載之后，它的安裝方法與普通軟件一樣,，更換軟件安裝位置之后,，一直點(diǎn)擊下一步，直至開始安裝,。 Git下載地址： https:///downloads ③ 安裝博客寫作客戶端 Gridea是一個(gè)靜態(tài)的博客寫作客戶端,，它提供了免費(fèi)和收費(fèi)的博客主題，通過(guò)應(yīng)用不同的主題,，可以讓原本簡(jiǎn)陋的博客更有設(shè)計(jì)感,。 安裝了Gridea后，需要先進(jìn)行一定的配置,。 在配置頁(yè)面中,，Platform選擇Github Pages，分支填寫master,，其他選項(xiàng)則根據(jù)個(gè)人信息進(jìn)行填寫,。 填寫好信息，先點(diǎn)擊保存,，接著點(diǎn)擊檢測(cè)遠(yuǎn)程連接,，查看是否連接成功。 若提示遠(yuǎn)程連接失敗,，解決方法可參考Gridea官方給出的文檔： https:///K9DdtABB Gridea下載地址： https://v 03.開始寫第一篇博客 完成上面的工作后,，就算完成了博客的搭建，接下來(lái)你就可以開始寫自己的第一篇博客了,。 ① Markdown語(yǔ)法 發(fā)布博客前,，你需要有一個(gè)編輯器來(lái)寫博客，Gridea中內(nèi)置了文本編輯器，采用的是Markdown標(biāo)記語(yǔ)言,，而非我們平常使用的Word那種富文本格式,。 相比富文本格式，Markdown有一個(gè)最大的優(yōu)點(diǎn)： 讓人更關(guān)注寫作本身,，而不是關(guān)注排版,。 使用Word寫作時(shí)，經(jīng)常會(huì)花費(fèi)較多時(shí)間在排版上,，而Markdown足夠簡(jiǎn)單,，去除了Word內(nèi)置的冗余樣式，選擇少了,，你也沒必要糾結(jié)于使用哪種樣式,。 雖說(shuō)Markdown是一種標(biāo)記語(yǔ)言，但你不需要被「語(yǔ)言」這兩個(gè)字嚇到,，因?yàn)樗?/span>并不算是編程語(yǔ)言,，學(xué)起來(lái)也非常簡(jiǎn)單，至多10分鐘就可以完全掌握,。 在文字最前面加三個(gè)#號(hào),，就表示標(biāo)題三的樣式；在文字前后各加兩個(gè)星號(hào),，相當(dāng)于對(duì)文字進(jìn)行加粗,。 *左邊是Markdown編輯窗口，右邊是預(yù)覽窗口 關(guān)于Markdown的更多常用標(biāo)記語(yǔ)法,，請(qǐng)自行上網(wǎng)搜索,。 ② Markdown編輯器 Gridea自帶的Markdown編輯器，不能同時(shí)并排顯示編輯窗口和預(yù)覽窗口,，想要實(shí)時(shí)預(yù)覽效果,，就需要頻繁點(diǎn)擊右側(cè)的預(yù)覽按鈕，這大大降低了碼字效率,。 為了能實(shí)時(shí)預(yù)覽效果,，我建議使用可實(shí)時(shí)預(yù)覽效果的外部Markdown編輯器，如馬克飛象和Typora等,。 馬克飛象,，是印象筆記推出的在線Markdown編輯器，只要有網(wǎng)絡(luò),，你就能隨時(shí)開始寫作。 此外,，由于馬克飛象和印象筆記是同一家公司的產(chǎn)品,，通過(guò)綁定印象筆記賬號(hào)，就能實(shí)時(shí)將內(nèi)容保存到印象筆記中，這也間接實(shí)現(xiàn)了內(nèi)容在多個(gè)平臺(tái)間的同步,。 馬克飛象在線地址： https:/// Typora,，是一個(gè)免費(fèi)的Markdown客戶端軟件，支持Win,、macOS和Linux三個(gè)平臺(tái),。 Typora雖然沒有馬克飛象并排的實(shí)時(shí)預(yù)覽窗口，但它也是所見即所得的,，輸入Markdown的標(biāo)記符號(hào)后,，就能馬上看到最終的效果。 使用Markdown寫文章,，有時(shí)需要將文章發(fā)送給他人查看,，若對(duì)方?jīng)]有用過(guò)Markdown，你直接發(fā)送一份Markdown文件過(guò)去,，會(huì)讓別人一臉懵逼,，也不便于多人間的協(xié)作。 而Typora也為我們考慮到了這一點(diǎn),，在導(dǎo)出中,，有多種文件格式可以選擇，如最為常見的PDF,、Word和圖片,。 Typora下載地址： https://www./#download ③ Markdown圖床 在Markdown中，使用的圖片都是通過(guò)鏈接的形式添加到文章中的,，下圖中的圖片就是使用https開頭的鏈接引用到Markdown中的,。 圖片通過(guò)鏈接進(jìn)行引用，這就需要我們先將圖片上傳到服務(wù)器中,，在網(wǎng)上用于存放圖片的服務(wù)器,，叫做「圖床」。 若你覺得圖床比較陌生,，也可以將圖床理解為網(wǎng)絡(luò)相冊(cè),，如QQ空間相冊(cè)、微博相冊(cè)等,，我們發(fā)布在QQ或微博的照片,，其實(shí)就是存放在了騰訊和新浪的服務(wù)器上。 網(wǎng)絡(luò)上的圖床有免費(fèi)和收費(fèi)兩種,，為最低成本地搭建一個(gè)博客,，我選擇使用免費(fèi)的圖床，而這個(gè)圖床剛好就是文章最開始提到的Github,。 ④ 圖片上傳工具PicGo 為方便將電腦本地的圖片上傳到Github,，我們需要安裝一個(gè)圖片上傳工具——PicGo,。 使用PicGo上傳到Github的圖片，它會(huì)返回圖片對(duì)應(yīng)的鏈接,，接著你將鏈接粘貼到使用Markdown寫的博客中,，圖片就可以正常顯示了。 PicGo是由一位個(gè)人開發(fā)者@PiEgg 開發(fā)的免費(fèi)圖片上傳工具,，支持Win,、macOS和Linux三大平臺(tái)。 安裝了PicGo后,，需要先對(duì)軟件進(jìn)行一定的設(shè)置： 點(diǎn)擊圖片上傳右下角的箭頭,，選擇Github圖床。 點(diǎn)擊左側(cè)邊欄的圖床設(shè)置,，選擇Github圖床,，進(jìn)入Github圖床的設(shè)置界面。 在Github設(shè)置中,，需要填寫的信息有倉(cāng)庫(kù)名,、分支名和Token等，這些信息在提示我們得去Github新建一個(gè)用作圖床的倉(cāng)庫(kù),。 下圖是我新建的用作圖床的倉(cāng)庫(kù),，創(chuàng)建方法與前面介紹的創(chuàng)建倉(cāng)庫(kù)操作基本一致，這里不再贅述,。 創(chuàng)建好圖床的倉(cāng)庫(kù)后,，我們還需要?jiǎng)?chuàng)建一個(gè)新的Token，用于連接PicGo與圖床倉(cāng)庫(kù),，創(chuàng)建Token的方法,，前面也有介紹過(guò)。 完成新倉(cāng)庫(kù)和Token的創(chuàng)建后,，我們回到PicGo的配置界面,，按照下圖填入相關(guān)信息。 *對(duì)上圖的說(shuō)明： 倉(cāng)庫(kù)名：格式為 Github用戶名/倉(cāng)庫(kù)名,； 分支名：設(shè)置為 master,； 設(shè)定自定義域名：格式為https://raw./Github用戶名/倉(cāng)庫(kù)名/master，前面的部分都是固定的,，后面的Github用戶名和倉(cāng)庫(kù)名根據(jù)個(gè)人情況進(jìn)行替換,。 完成以上設(shè)置后，點(diǎn)擊下方的確定按鈕,，若配置的信息正確,，在Win10系統(tǒng)右下角會(huì)彈出設(shè)置成功的通知。 返回到PicGo的上傳區(qū),，將你想上傳到的圖片拖拽到上傳區(qū),，待圖片完成上傳,，軟件會(huì)在桌面右下角彈出上傳成功的通知。 通知附帶了圖片上傳到Github的鏈接,，點(diǎn)擊通知面板，就會(huì)將鏈接保存到復(fù)制到系統(tǒng)的剪貼板中,。 此時(shí)再回到Typora,，將剪貼板中的圖片鏈接粘貼到文章中，就完成了博客圖片的添加,。 PicGo下載地址： https:///sNQWdAfG 04.發(fā)布你的第一篇博客 至此,，完成了前面較為繁瑣的操作后，你就可以正式發(fā)布自己的第一篇博客了,。 在博客客戶端Gridea中,，點(diǎn)擊左下角的預(yù)覽按鈕，可以預(yù)覽保存在本地的博客,，預(yù)覽后未發(fā)現(xiàn)問(wèn)題的話,，就可以點(diǎn)擊下方的同步按鈕，將保存到本地的博客推送到Github上,。 完成同步后,，在瀏覽器中輸入最開始創(chuàng)建的倉(cāng)庫(kù)的名稱，由于最開始我將倉(cāng)庫(kù)名稱設(shè)置為angola95.github.io,，因此在瀏覽器輸入這個(gè)地址,，就能打開我的個(gè)人博客了。 05. 寫在最后 使用本文介紹的方法搭建博客,，有兩個(gè)好處： 一是不需要花時(shí)間學(xué)習(xí)搭建博客所需的技術(shù),，對(duì)新手比較友好； 二是搭建的博客完全免費(fèi),，不需要擔(dān)心服務(wù)器到期訪問(wèn)不了,。 當(dāng)然，這個(gè)方法也存在一些不足：由于Github是個(gè)國(guó)外的網(wǎng)站,，若博客中添加的圖片過(guò)大,，加載的時(shí)間會(huì)延長(zhǎng)。 對(duì)比了這個(gè)方法存在的利弊,，我最終還是選擇了它,。 除了本文介紹的搭建博客的方法，網(wǎng)上還有很多其他方法,，感興趣的小伙伴可以自行搜索,。 以上，就是本次想和你分享的零基礎(chǔ)零成本搭建博客的方法,。 希望對(duì)你有幫助,，我們下次見,。
 |
|
|
