從上手即用到精益求精,手把手教你如何擁有個人網站

如今,個人網站或博客已經成了「小眾」的代名詞。但在許多年之前,它們曾經是人們在互聯網上輸出內容最主要的途徑。儘管微博、Instagram 等輕量的、簡短的、與移動設備密不可分的社交媒體已經成為今天我們網絡生活很重要的一部分,但博客並沒有就此消失:總有一些時候,比如你想尋找一塊「互聯網自留地」,或是想要進行一些完整的而非碎片化的記錄,或者想要避免無窮無盡的內容審查,又或者你只是不喜歡社交平臺那雜亂的界面和不必要的互動,個人網站或博客總是一個更好的選擇。

那麼,在 2020 年,如果你想要擁有一個個人網站,你應該怎麼做?十年前,市面上有各式各樣大大小小博客服務提供商,但現今的它們有很多都已經消失了。不過,得益於網絡技術的發展,今天我們也有不少新的服務可以選擇。

在這篇文章裡,我會給想要建立個人網站但是未必具備足夠的相關技術知識的朋友提供一個簡單的入門嚮導,介紹一些可行的選項和途徑。因此,文章不會涉及太多的技術細節,帶你入門之後,大門外的世界需要你自行探索。

Level 1:上手即用類

適合人群:我沒有任何技術基礎,只想要一個方便的界面和美觀的網站,能讓我把自己的內容發佈出來就行

如果你對於 web 技術並不瞭解,單純想有一個網站可以發佈自己的內容的話,一些自助建站服務會是你的好選擇。它們的共同點是,你不需要接觸任何代碼,只需要簡單的在後臺選擇你喜歡的模板,然後用拖拽或者可視化編輯器添加文章,你的網站就能上線了。自助建站服務商提供的模板通常都相當精美,而且可以適用於博客、作品集,乃至線上商店等多樣的需求。

Squarespace

  • 上手難度(等級越高越難):
  • 價格指數(等級越高,價格越高):
  • 數據掌控度(等級越高,你對個人數據的把控程度越高):⚙️⚙️
  • 頁面掌控度(等級越高,你對頁面設計的把控程度越高):

如果你是英文播客的聽眾,那你很可能已經聽說過 Squarespace 了。Sqaurespace 是目前口碑最好、服務最精良的自助建站服務商之一,它提供了大量豐富精美的模板和模塊化的文章編輯器,你可以簡單地通過拖拽來完成整個網站的設計和發佈,並且完美適配移動端和桌面端的瀏覽。如果你想購買域名,或者配置域名郵箱等服務,也都可以在 Squarespace 內完成。

從上手即用到精益求精,手把手教你如何擁有個人網站

Squarespace 提供的模板

從上手即用到精益求精,手把手教你如何擁有個人網站

Squarespace 的模塊化文章編輯器

Squarespace 採用了幾乎百分百的模塊化拼接,你既可以直接照搬已經預置好的模板,也可以在一個空白頁面上根據自己的需要塞入不同模塊,最終拼接成自己想要的功能和效果。對於不懂代碼的新手而言,這種傻瓜化操作非常容易上手。

不過,Squarespace 的價格比較昂貴,它不提供免費的方案,最便宜的套餐每個月也需要支付 12 美元(而且是年付價)。當然,在付費之前你可以隨意製作並預覽你的站點。此外,由於 Squarespace 的核心用戶群是餐廳、酒店、藝術家等商業展示站點,如果你僅僅是需要一個展示純文字的個人博客的話,它提供的模板可能會顯得有些過於花哨和複雜。

因此,如果你手頭的預算較為充足,想要方便的做出一個令人驚豔的個人網站,尤其是當你有展示一些設計、攝影等圖像的需求時,Squarespace 會是一個很不錯的選擇。

Weebly

  • 上手難度:
  • 價格指數:
  • 數據掌控度:⚙️⚙️
  • 頁面掌控度:

和 Squarespace 類似,Weebly 也是一個老牌的自助建站服務商了。相較於 Squarespace 清淡、偏向商務的風格,Weebly 無論是網站後臺還是模板都更加樸素和個人化一些。但是在功能上,Weebly 也一點不差,同樣提供了從域名註冊到電商整合的一條龍服務,而且它的文章編輯器更加簡單易用。

從上手即用到精益求精,手把手教你如何擁有個人網站

Weebly 提供的部分模板

從上手即用到精益求精,手把手教你如何擁有個人網站

相比於 Squarespace,Weebly 從價格到風格都是更加親民的選擇——它提供完全能夠滿足普通使用的免費方案(免費方案的限制是只能使用 .weebly.com 的二級域名,以及網站底部會顯示 Weebly 的宣傳條),能夠綁定自己域名的付費方案也只需要最低 5 美元一個月。

如果你暫時不想為了個人網站給自己增加太多的經濟負擔,或者你就是喜歡 Weebly 的某個模板,那麼 Weebly 是一個很好的開始。

Wix

  • 上手難度:
  • 價格指數:
  • 數據掌控度:⚙️⚙️⚙️
  • 頁面掌控度:

Wix 是和 Squarespace 齊名的自助建站服務平臺。如果你是 YouTube 重度用戶,一定在某個時期見過 Wix 大面積投放的片頭廣告。相比於前文提到的 Squarespace 和 Weebly,Wix 在建站思路上並無特別大的不同,都是由用戶選擇固定模板,然後自定義其中細節。但在具體的操作上,Wix 多了一個「ADI(Artificial Design Intelligence)」的設計模式,當你新建站點時,人工智能助手會問你一些諸如用途、風格偏好之類的問題,然後用算法生成一套網站視覺。此外,Wix 在模塊化和自定義程度上達到了事無鉅細的程度,支持插入大量網頁元素,並且每個模塊的大小都能實現像素級調節。因此,如果你願意花時間慢慢調試,可以讓自己的網站內容非常豐富,甚至達到門戶網站的效果。

從上手即用到精益求精,手把手教你如何擁有個人網站

Wix 比其他平臺多了一個 ADI 模式

從上手即用到精益求精,手把手教你如何擁有個人網站

Wix 能實現門戶網站級別的網頁效果,但也需要你付出很多時間用於頁面調試

Wix 的價格從每月 4 美元起步,不過最低套餐提供的支持和帶寬都很少,最實用的套餐價格為每月 12.5 美元,和 Squrespace 同等級別。Wix 適合沒有代碼基礎但對自己的網站設計要求更高用戶,其網站編輯器相對比較複雜,需要你上手一段時間後才能適應它的操作邏輯。

Typlog

  • 上手難度:
  • 價格指數:
  • 數據掌控度:⚙️⚙️⚙️
  • 頁面掌控度:️

Typlog 是一個更加年輕的建站服務商,相對於 Squarespace 或者 Weebly 的「大而全」,它更傾向於做一個「小而精」的平臺。與前二者的拖拽式、「所見即所得」的編輯方式不同,Typlog 的建站邏輯更偏向傳統的博客服務,你可以在一個控制檯內發佈文章、修改站點的模板和屬性。某種程度上,這是一種讓人可以更加專注於內容的極簡模式,你甚至不需要考慮頁面的設計,只需要選一個模板,上傳網站的 logo 和簡介,編輯文章發佈即可。

此外,如果你熟悉 Markdown,Typlog 是完全支持 Markdown 寫作的。因為 Typlog 的創始人是在日華人,它對於中文介面的支持也更完善。同時,Typlog 還有非常實惠的播客託管服務,目前在國內的獨立播客中也相當流行,我參與的播客《告別攝影》就採用 Typlog 搭建。

從上手即用到精益求精,手把手教你如何擁有個人網站

Typlog 的後臺介面

Typlog 針對不同的訪問量和上傳的多媒體內容大小(圖片、音頻等)有著不同層級的定價方案,對於文字為主的博客寫作者來說,最便宜的 4 美元一個月(如果按年支付,則是 40 美元一年)的套餐完全可以滿足需求。如果你想要一個更加簡單、清爽的寫作體驗,那麼 Typlog 是一個經濟便捷的選擇。

Level 2:精益求精類

適合人群:我具備一定的計算機基礎知識,希望對自己的網站有一些把控,但對於網絡技術研究不深

上一節中介紹的自助建站服務雖然方便,但缺點也很明顯——它們有點像樣板房,雖然功能完備,製作也很精美,但可供你自定義的空間也相對較小。如果你對於網站的版式、設計或者功能有一些更加細緻的需求,或者在模板建站的基礎上想預留一些插入腳本和代碼的空間,那這個章節提及的幾家服務可能會更適合你。

WordPress

  • 上手難度:
  • 價格指數:
  • 數據掌控度:⚙️⚙️⚙️
  • 頁面掌控度:️️️️

作為一個有著 17 年曆史的開源博客程序,WordPress 可以算得上是最著名的博客方案,沒有之一。WordPress 有著異常龐大的用戶社群,你可以在網上找到無數的主題和插件,可以說,其他博客服務有的任何功能,WordPress 幾乎都能做到。根據維基百科,截至 2019 年,世界上排名前 1000 萬的網站中,超過 30% 都使用 WordPress 搭建。WordPress 官方的建站服務 wordpress.com 可以讓你不需要自己購買服務器,只要註冊一個帳號,就能夠簡單地創建自己的博客站點。

關於 WordPress 的教程和使用說明,網上已經有很多,官網上也提供了簡體中文的文檔,在這裡我暫且簡單的羅列一下它的優勢:

  1. 容易上手。即使你不需要任何進階的功能,WordPress 本身就是一個完善的博客程序,只需要註冊帳號,你就可以得到一個易用的博客後臺,選擇模板和發佈文章的流程一點也不比上一節中的建站服務複雜,同時 WordPress 也提供完整的簡體中文支持。
  2. 功能完善。從基礎的 tag、分類、文章加密,到進階的音頻視頻展示、多個帳號共同編輯、評論,乃至和其他博客的社交互動,WordPress 都可以做到。
  3. 便於維護。由於 WordPress 是世界上最流行的博客程序,即使你想要遷移到其他的博客服務,它也是支持最完善的。通過插件和第三方服務,你可以通過各種方式來遷移、備份你的內容,而不用擔心兼容問題。
  4. 支持廣泛。除了 wordpress.com,你可以把你的 WordPress 站點部署在任何服務器上。事實上,許多常見的服務器供應商,例如 Digital Ocean 或者 Siteground,都提供一鍵部署 WordPress 的功能,這意味著在自己的服務器上建立一個 Wordpress 網站就像在 wordpress.com 上註冊一個帳號那樣簡單,而且如果你想要將你的網站遷移到自己的服務器上,也只需要做一些簡單的複製粘貼就可以了。

因此,如果你想要快速的建立自己的網站,但又不想失去一些「折騰」的空間,WordPress 無疑是你最好的選擇。對於沒有任何代碼基礎的用戶,WordPress 可以當成一個「所見即所得」的傻瓜式平臺;對於願意折騰插件和代碼的玩家來說,WordPress 也有著充分的折騰空間,可以任你隨意「魔改」。此外,即使你一分錢不花,僅採用 wordpress.com 的免費方案,依然能獲得 30GB 的存儲空間,這個容量對於以文字內容為主的個人博客來說已近無限,十分划算。

Cargo

  • 上手難度:
  • 價格指數:
  • 數據掌控度:⚙️⚙️
  • 頁面掌控度:

如果你需要一個自己的網站來展示自己的圖像作品,或者你對於網站的設計有著很高的要求,那麼你不應該錯過 Cargo。一直以來,Cargo 專注於為視覺藝術家、設計師等群體提供建站服務,你從它的官網到網站編輯的界面都可以體會到它的與眾不同。

從上手即用到精益求精,手把手教你如何擁有個人網站

其他的建站工具通常都還是保留著傳統的從上到下,從左到右的流式網頁佈局,而 Cargo 的編輯器給了你異常大的自由度——你可以在頁面上隨便堆疊、擺放任何元素,可以將一段文字旋轉 45 度,或者直接上傳一個視頻作為網頁的背景。Cargo 的編輯方式很難用語言描述,但只要你看過用它做出的網站,一定會讓你印象深刻。事實上,利用 Cargo 建立的網站屢屢被視為網頁設計的典範,如果你訂閱了 Cargo 的 newsletter,也會定期收到一些優秀網站案例。只要你花一些時間熟悉它的編輯器(Cargo 的官網上提供了我見過的所有建站服務商中最豐富、最詳細的視頻教程資源),Cargo 會是發揮你的創造力的最有力的工具。

不僅如此,Cargo 和獨立字體商店 Type Network 有深度合作,提供了數百種精心挑選的正版字體,所有用戶都可以在自己的網站裡隨意使用。如果你對網站的字體排印有自己的想法,這些字體能幫你更好地展示個性,提升網站的視覺表現力。

Cargo 的價格並不便宜,它的價格是 13 美元每月,或 99 美元每年,同樣提供付費之前的全功能試用。如果你想做的是一個傳統的博客,它不是最佳之選——Cargo 沒有像其他博客平臺一樣提供獨立的文章管理,這意味著你每發佈一篇文章就需要創建一個新的「頁面」,或者反覆編輯一長串的文字。但如果你想要在自己的個人網站上展示多樣的作品,充分發揮你的創造力,那麼 Cargo 值得一試。

一些使用 Cargo 製作的網站:

  • https://de-form.hu/
  • https://designdoesntmatter.com/
  • https://comradeanimal.com/

Ghost

  • 上手難度:
  • 價格指數:
  • 數據掌控度:⚙️⚙️⚙️
  • 頁面掌控度:️️️

同為全功能的開源博客程序,Ghost 是 WordPress 的直接競爭者(實際上,Ghost 本身就是一些不滿於 WordPress 的臃腫而選擇單飛的 WordPress 員工所開發的)。作為後起之秀,Ghost 雖然沒有 WordPress 那樣龐大的用戶社群和資源積累,但是優勢也是很明顯的——它的程序本身更加小巧、加載速度更快、介面更現代、原生支持 Markdown、Mailchimp、Slack 等常見服務、支持響應式佈局,更重要的是,它是一個專注於寫作和發表的平臺,對於富文本的編輯支持非常好。

和 WordPress 類似,Ghost 也提供官方託管服務,因此你只需要在 Ghost 的 官網 註冊一個帳號,就可以得到一個自己的 Ghost 博客了。不得不說,Ghost 的後臺介面非常精緻,文章編輯器令人想到排版廣受好評的寫作平臺 Medium,如果你懶得自己折騰各種純文本或者 Markdown 編輯器,而希望在瀏覽器中獲得更好的寫作體驗,那麼 Ghost 無疑是做得最好的之一。

從上手即用到精益求精,手把手教你如何擁有個人網站

Ghost 的後臺介面非常好看

不過,Ghost 官方提供的託管服務價格不菲,最便宜的方案也要 29 美元一個月。但是如果你喜歡 Ghost,也願意學習一些服務器、Docker 等知識,那麼在自己的服務器上安裝 Ghost 也並不困難(你可以在《Docker 的入門「指北」》一文中學到有關 Docker 的相關知識)。整體來說,Ghost 在使用自由度上和 WordPress 類似,既可以零基礎一鍵建站,也可以為老玩家提供服務器部署。如果你想要獲得一個更加現代的博客體驗,或是對於郵件訂閱、各類服務整合有需求,那麼 Ghost 會讓你感到得心應手。

Level 3:自建部署類

適合人群:我不介意學習網絡知識,或者我已經具備了一定的代碼能力,想要自由地打造我的網站,並儘可能把數據掌握在自己手裡

如果你對於學習一些計算機技術抱持著開放的態度,或者想要從底層到前端完全掌控自己的網站,那麼你可以找到一些更加經濟、自定義程度更高的方法來建立你的博客。關於此類方案的具體配置辦法,我派作者們先前已經寫過不少,我在此處只簡單提及建站要點,供你按圖索驥。

靜態網站生成器,以 Hexo 為例

  • 上手難度:
  • 價格指數:
  • 數據掌控度:⚙️⚙️⚙️⚙️⚙️
  • 頁面掌控度:️️️

所謂「靜態網站」,所謂的「靜態網站」,指的是網站的所有頁面與服務器上的 HTML 等格式的網頁文件一一對應,而不根據數據庫、訪問者信息等動態生成內容的網站模式。利用 Github Pages 和靜態網站生成器,只要你的網站不涉及盈利,你可以完全免費的建立一個五臟俱全的博客。在介紹這個建站方案之前,你需要先了解一些概念:

  • Github:Github 是一個代碼託管平臺,你可以將你的代碼(在這個例子裡,也就是你的網站源碼)免費上傳到 Github 上,你既可以在上面管理你的項目,也可以與其他 Github 用戶進行交流、互相幫助。
  • Github Pages:Github Pages 是 Github 提供的一種免費服務,可以將你託管在 Github 上的網站源碼自動發佈成可以被公眾訪問的網站。
  • 靜態網站生成器:靜態網站生成器是一種格式渲染和轉換器,可以將你用 Markdown 寫好的文章轉換為制定主題的 html 格式頁面。
  • Hexo:Hexo 是一個靜態網站生成器,它可以幫助你將寫好的文章轉換成網站源碼。
  • Markdown:Markdown 是一種標記語言,可以用任何文本編輯軟件編輯(例如,最簡單的,「記事本」)。簡單地說,Markdown 是一種標記你的寫作內容的方式,它可以讓計算計理解你的文章的格式,例如,哪些是標題,哪些文字需要加粗強調等。你可以在《認識與入門 Markdown》一文中瞭解如何使用 Markdown。
  • 終端(Terminal):終端是你電腦中的一個程序,在終端裡,你可以用輸入命令的方式來操縱你的電腦。和普通的軟件不同,你可以理解為,終端是一種直接向你的電腦下命令的方式。如果你對終端一無所知,可以先讀一讀這篇文章:《玩轉 Terminal 終端:入門指南及進階技巧》。

通過這些工具,你只需要用 Markdown 撰寫你的博文,設置好 Hexo,它就可以幫你生成整個網站的源碼;接著,將源碼上傳到 Github 之後,大家就可以訪問你的博客了。如果你想要用 Hexo,或者其他類似的工具來製做你的個人網站,以上這些只是都是最為基礎的,瞭解它們對於以後進一步的完善你的網站很有必要。很顯然,Hexo 也並非唯一的靜態網站生成器,本文只是用它作為一個例子,如果你願意,你也可以使用 Jekyll、Hugo 等其他類似的生成器來製作你的網站,而它們的使用方法雖然各有不同,但是背後的邏輯都是類似的。作為參照,用 Hexo + Github Pages 建立一個網站的步驟大致如下:

  1. 註冊一個 Github 帳號,然後創建一個代碼倉庫,用來存放你的博客的源碼。通常,你可以用 username.github.io 作為你的倉庫名,username 是你的 Github 用戶名,這樣,Github 會自動把你的博客地址設為 username.github.io。
  2. 在你的電腦上安裝 Hexo(如果你是 Windows 用戶,你可能需要先安裝 Git,後續的操作都可以在 Git Bash 中完成)。
  3. 生成一個新的 Hexo 站點,並設置你的站點名稱、作者等基本信息。你可以在 這裡 挑選你喜歡的主題並下載安裝到你的站點中。
  4. 用 Markdown 進行寫作,並保存在站點的 /source 文件夾中。
  5. 在你的寫作告一段落之後,通過 hexo deploy 命令將你的站點上傳到 Github 倉庫中。此時,你的博文原稿儲存在你的電腦上,而 Hexo 所生成的網站源碼會被上傳到 Github 上,之後每次撰寫新文章,只需要重複 5、6 兩步即可。

由於現在已經有許多優秀的作者撰寫了簡單易懂的相關教程,本文在這裡並不打算將這個方案的具體操作流程一一寫出,而是理順「創建→更新」你的站點的方法和邏輯。關於 Hexo 建站的具體操作流程,可以參考《記錄生活,分享點滴:通過 Hexo 搭建與使用個人博客》這篇文章中的教程,非常簡單易懂。

Typecho

  • 上手難度:
  • 價格指數:
  • 數據掌控度:⚙️⚙️⚙️⚙️⚙️
  • 頁面掌控度:️️

和 WordPress 類似,Typecho 也是一個運行在服務器上的博客程序,但與 WordPress 不同的是,Typecho 不提供官方的託管服務,如果你想使用 Typecho 就必須擁有自己的服務器,並把它託管在你的個人服務器上。Typecho 同樣完全開源,並且比 WordPress 更加輕巧簡單。Typecho 由華人開發,目前也已經積累了一定的用戶社群,也可以找到模板和插件。因此,如果你想擁有一個自己的服務器,對自己的網站數據有著完全的把控的話,Typecho 是一個不錯的開始。

Typecho 的配置頗為簡單,如果你已經有了一些關於服務器的相關知識,那麼你在閱讀官方的 安裝教程 之後應該就已經知道怎麼做了。如果你是第一次接觸這些,那麼這是你需要了解的幾個步驟:

1. 你需要購買一個域名及一個服務器,國內的 阿里雲、騰訊雲,國外的 Siteground、Smallweb、Bluehost 等服務商都提供適合建立個人網站的服務器方案,你可以根據自己的預算和具體情況進行選購。對於 Typecho,請確保你購買的服務器支持運行 5.1 以上版本的 PHP。

2. 將官方提供的最新版本的 Typecho 下載、解壓並上傳到服務器上。

3. 用瀏覽器訪問你的域名 yourdomain.com/install.php,你就可以看到 Typecho 的配置嚮導了。你需要在這裡設置你的管理員帳戶和密碼,以及關於數據庫的一些信息。如果你要安裝插件或者更改主題,你只需要將相關的文件放到 /usr/plugins 或 /usr/themes 目錄中,併到後臺啟用即可。你可以在 這裡 或者 官方論壇 中找到一些 Typecho 的主題和插件。

4. 這時,你的 Typecho 站點就已經配置完成了,只要有瀏覽器,你就可以隨時通過訪問網站後臺(yourdomain.com/admin)來更新你的網站。

相比於最低成本為零的 Hexo 等靜態網站生成器,Typecho 多少會花費你一些服務器的開支,但是好處也是顯而易見的——作為動態站點,在配置好之後,你只要能夠連上互聯網,打開瀏覽器就可以隨時撰寫文章、管理網站,而不再需要每次更新都必需打開終端進行操作。而相對於 Squarespace 等自助建站商,購買個人服務器價格也非常低廉。

服務器、域名及其他

如果你想要完全掌控你的網站——自己設計、自己決定服務器裡可以儲存的內容,那麼自建網站總是一個終極的解決方案。當然,能做到的事情越多,需要學習的也越多,如果你想要完全靠自己建立一個個人網站,那麼你至少需要了解這些。

  1. 首先,你需要一個服務器。服務器是一臺遠程的計算機(即使很多時候是一臺虛擬的計算機),它和你的電腦一樣擁有存儲空間、處理器、內存和聯網機能,這樣你就可以把你的網站存儲在裡面,並且 24 小時上線。可以用於建站的服務器有很多種(VPS、虛擬主機等等),價格也各不相同,你可以根據需要進行選購。
  2. 其次,你需要一個域名。域名相當於你的網站的地址。只有有了公開的域名,別人才能找到你的網站。域名的購買就很簡單了,如果你在意你的網站在中國大陸的合法性,那麼你可以去 萬網 或者 騰訊雲 購買域名,不過這也意味著你需要將你的網站在中國大陸備案。你也可以在一些國際域名經銷商購買域名,domcomp 會告訴你你喜歡的域名在哪個網站比較便宜。我自己用過 Namecheap 和 Porkbun 都是性價比比較高的選擇。
  3. 接著,你需要製做你的網站源碼。前面幾節中提到的知識對你來說仍然是有用的,你可以將你的 WordPress 站點部署在你自己的服務器上,或者利用 Hexo 等靜態網站生成器製做網站源碼並上傳到你的服務器,這些都是很方便的辦法。
  4. 如果你想要完全靠自己建立一個網站,你至少需要學習 HTML、CSS 和 Javascript,這是三種編寫一個網站最基本的語言,你可以在 W3Schools 上學到幾乎所有相關的知識。通過這幾種基礎的語言(當然,還有更多),你可以從學會看懂一個網站開始,進而學會如何修改它,直至最終具備製作一個獨立的網站的能力。

寫在最後

個人網站是一個很有意思的東西。它曾經是一個人人都想要、人人都能有的「互聯網必需品」,人們把它當作向外界展示自己的窗口。你在上面分享你的生活,寫下你的想法,一些網頁設計的細節或者前端的花招都可以讓人得意很久。

隨著移動互聯網時代的到來,強調短內容的社交平臺成了新的內容集散地。儘管社交媒體讓我們可以更方便地交流和分享,但是個人建站這種「自己經營一片小天地」的感覺仍然很難取代。如果你在今天仍有一片自留地想要堅守,希望這篇文章能幫你邁過個人建站的第一道坎,找到最適合你的建站途徑。


分享到:


相關文章: