日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

無需編程，零成本！只需挑選一個主題，經(jīng)過配置，加入內(nèi)容即可。

作者 | Stephen Vinouze

譯者 | 彎月，責編 | 郭芮

頭圖 | CSDN 下載自東方IC

出品 | CSDN（ID：CSDNnews）

以下為譯文：

創(chuàng)建一個網(wǎng)站的工作量不容小覷。即便你擁有編程背景，也有可能在網(wǎng)絡上迷失方向，究竟從何處下手呢？

我可以在此承諾，讀完本文，你的收獲包括：

• 一個免費的優(yōu)雅網(wǎng)站，甚至無需托管。

• 一個評論框，讓讀者與你互動。

• 一個郵件訂閱列表，用于通知用戶你新發(fā)布的內(nèi)容。

• 使用分析工具來跟蹤讀者的行為。

• 以及其他高級的主題。

首先給你看一下我最近構建的網(wǎng)站（https://www.stephenvinouze.com/），很酷吧？

我花了大量時間整理和研究有關靜態(tài)網(wǎng)站生成器的文章。本文匯總了我獲取的所有信息，希望能為你呈現(xiàn)一份完整的指南。

下面，我們開始吧！

前提條件

剛才我曾說構建新網(wǎng)站不需要花費1分錢，這要感謝GitHub Pages（https://pages.github.com/）。

你只需創(chuàng)建一個GitHub賬號，即可免費托管你的網(wǎng)站。版本管理與部署的工作可以全權委托給Github。非常方便！

你甚至不需要懂得html或css，盡管了解這些更好。GitHub Pages使用Jekyll將Markdown文件轉換成HTML，所以你只需要關注內(nèi)容即可。

所以前提條件是：

1. 擁有GitHub賬號。

2. 了解Git的基本知識。不需要是專家，甚至可以直接在GitHub的Web界面上操作。

3. 了解怎樣書寫Markdown，通過官方的速查表（https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet）分分鐘就能學會。

如果這些都沒問題，那么我們就來看看最激動人心的部分吧！

選擇主題

這是本文最重要的部分！你可以慢慢選擇最適合需要的模板。

你可以找到一大堆免費的主題。這些主題都有詳盡的文檔，適用于各種情況，不論你想建立個人博客，還是建立個人主頁。當然你也可以花錢選擇付費主題。

例如，我的博客選擇了Mediumish主題。感謝WowThemes免費提供了這個優(yōu)秀的主題。

瀏覽這些主題，點擊“Live Demo”按鈕可以看到實時的預覽。找到你想要的那個！

部署網(wǎng)站

假設你已經(jīng)建好了GitHub賬號。仔細看看GitHub Pages的文檔就會知道（https://pages.github.com/），你應該建立一個Git倉庫，取名為your_username.github.io。

我們跳過這些設置的步驟。畢竟，我們選擇主題的目的就是為了跳過這些設置步驟。你可不想在設置上花費一整天。

根據(jù)你選擇的模板的Git倉庫建立分叉。模板頁面上應該有一個鏈接，點擊后就能創(chuàng)建一個復制的Git倉庫，你可以在這個倉庫中寫入內(nèi)容。

分叉之后，你需要將這個倉庫的名字改成your_username.github.io。點擊“Settings”，然后重命名倉庫：

試試看！你的網(wǎng)站應該已經(jīng)可以使用了！在瀏覽器中打開一個新的頁面，輸入URL：http://your_username.github.io/ （將your_username替換為你的用戶名）。

如果還有疑問，可以比較一下你和我的代碼庫。

https://github.com/StephenVinouze/stephenvinouze.github.io

準備自己的版本

GitHub會從master分支部署網(wǎng)站。記住，推送到master上的任何修改都會導致網(wǎng)站重新部署。

所以在開始之前，我建議你先創(chuàng)建一個develop分支。在將develop合并到master之前，所有的改變都不會影響網(wǎng)站的內(nèi)容。

使用develop分支，你可以嘗試任何東西而不用擔心把網(wǎng)站搞壞。

測試改動

你肯定想看看develop分支的改動會對網(wǎng)站產(chǎn)生什么影響。我們可以在本地部署。打開控制臺，在你克隆git倉庫的地方輸入下列命令：

$ bundle exec jekyll serve -- watch

然后用瀏覽器打開這個地址：http://localhost:4000/

你可以一直保留這個終端窗口，網(wǎng)站就會在你自己的機器上一直運行，直到你關閉為止。

配置網(wǎng)站

現(xiàn)在你的網(wǎng)站還只是一個空殼，我們來添加一些內(nèi)容。

注意：我建議把這篇文章當作一個指南。并非所有主題的配置都一樣。如果你選的主題和我選的不一樣，那么我在文章里寫的并不一定適合你。請仔細閱讀主題本身的文檔。

首先，我們來看看_config.yml文件，這里有許多神奇的配置。有幾個參數(shù)需要按照自己的需要更新。

你可以自行配置一些東西，例如：

• 聯(lián)系信息

• 頭像

• 社交網(wǎng)絡鏈接

重啟Jekyll進程，然后刷新頁面，就能看到修改的效果。

需要提醒你，在改變_config.yml文件后，必須重新啟動Jekyll才能看到效果。對于其他文件的改動則只需要刷新頁面即可。

發(fā)布文章

現(xiàn)在可以將模板上的文章替換為你自己的文章了。

在開始之前，要理解Jekyll的命名規(guī)范。所有文章必須：

1. 保存在_posts文件夾下

2. 命名為yyyy-mm-dd-name-of-your-post.md格式

3. 用Markdown語言編寫（即擴展名.md的含義）

試試看！在_posts目錄下用適當?shù)拿謩?chuàng)建一個文件。然后，刷新瀏覽器就能看到你的文章顯示在網(wǎng)站上。

“如果我的有些文章已經(jīng)發(fā)表在Medium上，想轉換成Markdown怎么辦？”

有幾個解決方案。我推薦使用這個十分好用的轉換器（https://medium-to-markdown.now.sh/）。

需要提醒的是，它無法處理Gist，所以你需要手工提取Gist。但并不復雜，只需右鍵點擊Medium中的Gist然后將其中包含的<script>標簽中的鏈接提取出來即可。

與讀者互動

許多主題都支持Disqus（https://disqus.com/）。這個服務可以在你的網(wǎng)頁上添加一個評論區(qū)。配置方法如下：

1. 創(chuàng)建一個Disqus賬號，可以先選擇免費的套餐。

2. 用網(wǎng)站名作為唯一的ID，輸入網(wǎng)站的URL。

3. 將_config.yml中的Disqus值替換成你的Disqus網(wǎng)站名。

下面的截圖中可以看到我的網(wǎng)站Disqus配置。在我的_config.yml文件中，我將Disqus值設置為stephenvinouze：

你也許注意到我的URL并不是https://stephenvinouze.github.io。我稍后會解釋為什么。現(xiàn)在你應該使用你的GitHub URL。

還有，你應該注意Disqus永遠不會在你的本地工作，因為你上面指定的是正式網(wǎng)站的地址。

請記住，你現(xiàn)在修改的還是develop分支。如果你已經(jīng)提交并推送了你已經(jīng)完成的修改（你應該這么做），你的網(wǎng)站并不會被重新部署。如果想檢查Disqus是否正常工作，就必須將develop合并到master。然后可以訪問正式網(wǎng)站的URL（網(wǎng)站部署可能需要一些時間）。

你應該能看到下面的評論區(qū)：

留住訪問者

網(wǎng)站的第一要務就是存留率。你在與整個互聯(lián)網(wǎng)競爭，讓你的聲音能被全世界聽見。怎樣才能讓別人訪問你的網(wǎng)站？或者說，為什么他們會留在你的網(wǎng)站？

也許你聽說過seo。不幸的是，我對于這個話題并不熟悉。不過你能找到許多這方面的文章。有一些模板據(jù)說是SEO優(yōu)化過的。不過我不會過于依賴這些模板。

除了SEO之外，你還可以邀請訪問者繼續(xù)關注未來的文章。有幾種機制可以達到這一點。一種方法叫做Mailchimp（https://us18.admin.mailchimp.com/）。就像Disqus一樣，你可以嵌入一個HTML表單，這樣你在發(fā)布新文章的時候可以通知用戶。許多主題已經(jīng)包含了Mailchimp。很方便吧？

不過，Mailchimp的配置并不是太直觀。我花了很多時間嘗試搞明白他們的儀表板怎么用。

我的主題要求我添加一個來自Mailchimp的訂閱列表鏈接。我假設你也遇到了同樣的要求，所以我將帶領你配置一下。

就像Disqus一樣，首先需要創(chuàng)建一個賬號，選擇免費套餐，然后回答一些問題。

選擇“Audience”。右側面板有一個“Manage Audience”。打開它，然后點擊“Signup forms”。

選擇第一個叫做“Form builder”的項目。這里你可以收到訂閱表單。用戶點擊網(wǎng)站的“訂閱”按鈕時就會看到這個頁面。你可以進行一些定制。

Mailchimp可以讓你修改表單的布局，以及你希望用戶填寫的字段。如果你想把用戶嚇跑，就保持表單盡可能簡潔。一個電子郵件字段就足夠了。

要把表單連接到網(wǎng)站上，只需復制“Signup form URL”中顯示的短鏈接。在瀏覽器中打開，看看表單的實際樣子。你可以將完整的URL復制到你的項目中，完成這個配置。

如果你還想深入，可以定制一下其他表單。在同一個網(wǎng)頁上，找到頂端的“Signup form”面板。這個下拉列表列出了所有訪問者通過郵件列表與你交流時能夠看到的表單。

創(chuàng)意的工作就交給你自己了。到這里為止，你的郵件列表訂閱應該可以工作了。別忘了將修改合并到master分支來應用這些修改。

跟蹤用戶

跟蹤是用戶看不到的一部分工作，但你絕不能忽視它。

google Analytics可以幫你分析用戶的行為。你可以了解用戶如何訪問你的網(wǎng)站，哪篇文章的效果最好。

絕大多數(shù)模板都集成了Google Analytics來跟蹤網(wǎng)頁瀏覽。如果你的模板沒有，可以參考這篇文章：

https://desiredpersona.com/google-analytics-jekyll/

你需要指定一個Google Analytics ID。也許這看起來有些無聊，但我們需要重復在Disqus和Mailchimp上進行過的操作。你會被重定向到這個頁面，該頁面上可以找到TrackingID。在下面的截圖上可以看出，我的是UA-166933112-1。將其復制到你的_config.yml文件中，就搞定了。

同樣，別忘了將修改合并到master。重新部署后，嘗試瀏覽幾篇文章。你應該能在Google Analytics的實時儀表板中看到點擊次數(shù)的增加。

福利：自定義域名

到這里為止，你的網(wǎng)站就建好了。

你的網(wǎng)站的地址為http://your_username.github.io/。但是如果能有一個更友好的域名該多好！

GitHub Pages可以讓你指定自定義域名。對于我的網(wǎng)站來說，所有訪問http://stephenvinouze.github.io/的都會被重定向到https://www.stephenvinouze.com/。

盡管我承諾這個網(wǎng)站是免費的，但這一步例外。你需要購買一個域名。

如果你不想花錢， 則可以跳過這一步。但是，擁有自己的域名可以讓訪問者更容易找到你。這是你的網(wǎng)站的品牌。

如果你想做這一步，你需要一個DNS供應商。我選擇了Google Domains，因為它：

• 很容易配置

• 可靠

• 便宜（每年只需十幾歐元）

購買域名之后，你需要將自定義域名關聯(lián)到你的GitHub賬號上。在本文開頭提到的編輯Git倉庫的同一個頁面上，向下滾動直到你看到這一節(jié)：

用你購買的域名填寫“Custom domain”字段。我推薦勾選Enforce HTTPS。

保存這些設置，然后進入Google Domain的控制臺。在“DNS”小節(jié)中，用你的記錄替換自定義記錄。可以參考這篇文章（https://medium.com/@hossainkhan/using-custom-domain-for-github-pages-86b303d3918a）。

搞定了！試試看用新的URL訪問網(wǎng)站吧。

注意新購買的域名可能需要最多一天時間才能訪問。我的花了大概一個小時。

總結

恭喜，你成功了！

通過GitHub Pages可以如此輕松地構建網(wǎng)站，我對此非常驚訝。

但是，我們不要忘記社區(qū)為我們開發(fā)了這些預配置的精良模板。為了感謝他們的辛勤工作，請在你的網(wǎng)站內(nèi)注明模板出處，尤其是當遇到你非常喜歡的免費主題時，這也是支持他們努力的象征。

原文：https://medium.com/better-programming/how-to-swiftly-launch-a-free-website-with-github-pages-9be6441fce61

本文為 CSDN 翻譯，轉載請注明來源出處。