此前曾提過，我近期沉迷于用無代碼的方式建設個人網站，還立下Flag，說一定會更一期入門版的DIY教程。拖了許久，我今天終于帶著56張圖片來交差了……

建設無代碼網站的方式有許多，我好友用的是Squarespace，效果相當出彩，我因為有博客的緣故，用的是WordPress。其實我覺得市面上應該有不少類似的工具，隨便選一家應該都有相似的效果。

剛開始時，我因為不熟悉各種模塊，用無代碼版建網站時很憋屈。因此，我轉頭用上了WordPress的.org版，吭哧吭哧地折騰了幾天，幸而效果還不錯。后來不甘心于建個網站都比別人艱難，于是又研究回了WordPress的.com版。

近日又折騰了許久，總算對無代碼版網站的建設有了得心應手的感覺。本次更的就是這個版本的教程。

一、建設個人主頁

WordPress有多個語言版本，我剛開始時跳轉的中文版，刷新幾次后莫名就跳回了英文版，但我對比過多語言的后臺，其實大致都一樣，主要是語言以及一些社交軟件及支付方式方面的區(qū)別。以下截圖來自于英文版。

我是從注冊新郵箱開始做的教程，不過后來一想，也不會有什么人沒有電子郵箱了，這一步干脆略過。直接在搜索引擎搜“WordPress”，隨后進入到Wordpress.com的網站建設指引，接著會出現以下界面，我選的是免費版。

接下來，輸入自己的任意一個郵箱地址，擬一個用戶名，以及設定密碼。

建立WordPress賬號以后，跳轉到的是域名界面。這個區(qū)域可以使用自己已經擁有的域名，也可以買一個全新的域名，不過為了將免費進行到底，我不打算在域名上花錢，就隨便想了個名字。以后要是想要有個好域名，也可以隨時添加或更改。

作為一個起名廢柴，我把魔獸世界里的各個主角的名字都想了一遍，最后選定了風元素領主奧拉基爾，于是用了windlord作為站點名稱的關鍵字。隨后在各種示意例子中，我選擇了免費的網址。這時候，這個選定的網址可以專門存下來，之后經常會用到，并且在很長的時間里，這便是自己網站的網址了。

選定了域名，自然就開始了正式的建站之旅。網頁將跳轉并自動進入到建設網站的后臺。其中“Name your site”這個紫紅色按鍵就是進入下一步的關鍵入口，隨后的步驟，就如右邊被我用紅色線條框起來的差不多。

就如先前所說的那樣，我將我的新網站，起名為Windlord，意即“馭風者”，還隨手寫了句標語：The rider of the wind element。

給網站起名后，就到了最重要的一步：編輯主頁。同樣是在紫紅色按鈕處進入。

編輯主頁的時候，會如下圖一般，出現一些講解頁面，看一看還是很有必要的。不看的話，其實也不影響我之后講解的步驟。

我在主頁編輯頁面，隨意選了一個風格，其實也可以選空白頁或者其他風格。但我一直認為，建網站從最容易的地方開始，出成果越簡單，成就感就來得越快，也就有更多的動力去折騰。

除了主題圖片可以進行編輯以外，網頁下拉后是博客的最新更新示例。事實上，就一個網站而言，這些內容顯得太少了，就像個博客的主頁一般。不過WordPress是靠博客起家的，有這個毛病也無可厚非。

我隨意看了下，認為最起碼還是要加些相冊或者合輯，于是我從頁面左上角的“+”號處，添加內容。這個按鍵進去后有很多內容可以選擇，其中，“Blocks”是一些固定模塊，比如段落，比如題目，這個操作跟做PPT有異曲同工之妙。但我選擇的是右邊的“Patterns”，里面有很多已經搭配好的內容，我選了一個帶四幅封面圖的相冊。

相冊添加成功后是顯示在整個主頁的最末端，但我想遷移到比較前面的位置。點擊這個相冊中間位置以后，前面的兩個相冊的左上角會出現一個編輯小框體，小框體里的第三個位置有向上與向下的箭頭，一直點擊往上的箭頭即可。

前兩個相冊移到了首頁圖片的下方，隨后我將后兩個相冊也移了過來。于是，主頁變成了主題圖片（可跳轉）、四個相冊（可換封面但不可跳轉）、三個最新的博客，以及這個主題自帶的“Content”模塊。

到了這個時候，如果想要加相冊或者圖片顯示，或者任意想要的模塊（比如音樂或者視頻），就都可以通過左上角的“+”號來繼續(xù)，不過作為示例，我打算把這個頁面直接發(fā)布。一般來說，官方是不建議在網站沒有做完的時候發(fā)布的，但我認為發(fā)布后可以問問親朋好友，讓他們給一些建議，所以發(fā)布了比較方便一些。發(fā)布的按鈕在右上角。

點擊發(fā)布按鈕后，WordPress看起來還是想要再努力一把，于是又出現了誘拐買域名或者定制會員的行為。不過我還是相當堅定地選擇了免費版。

至此，一個簡易的網站算是正式發(fā)布成功了，如果單純就是玩玩，可以開始往里面寫一點內容，算是有了個自己的網站雛形了。

二、網頁跳轉

真正的網站肯定還是有著更多的功能跟欄目的，所以在發(fā)布以后，網站需要開始設想要多少個欄目。我在這個示例里，計劃將網站分成主頁、工作、生活、關于這四個欄目。所以在“主頁”的基礎上，我還需要建設一個“工作“頁面、一個“生活”頁面、一個“關于”頁面。

建設新的頁面時，從屏幕的左上角選擇帶有“W”字樣的WordPress的logo。隨后在左下角點擊“Add new page”，增加一個新頁面。

新的頁面打算講訴“工作”相關的內容，畢竟是個人網站，所以展示做過的項目是比較好的做法。先在“Featured”里選擇，這個區(qū)域有大家比較喜歡用的模板。

我選擇了默認里的Portfolio，這是一個頁首是幻燈片頁面內有多個項目可以編輯的形式。

把“Portfolio”改成了“Work”，隨后點擊右上角的“Publish”發(fā)布。

發(fā)布完頁面后，繼續(xù)新建頁面。

新建的頁面計劃講訴生活方面的內容，因而選擇了“Gallery”里面的模板。

改名為“Life”，并發(fā)布。

同樣的，發(fā)布后繼續(xù)新建頁面。

本次新建的頁面是個人資料頁，所以選擇了“About”里的模版。

改名并發(fā)布。此時一共新建了三個頁面。作為示例是已經夠了，如果有需要，還可以建設更多。我很好奇，有沒有可愛的“小傻子”閑著測試一下新增成千上萬個網頁要花多久時間。

三個頁面建設完畢后，選擇“Dashboard”,回到個人后臺。

后臺管理的左側有非常多的功能，有空可以探索下，但此次，我們主要是來編輯菜單的。菜單編輯的按鈕在頁面右下角，主要目的是把新建的網頁顯示出來。

進入菜單編輯頁面。

選擇自動呈現的“Primary”。

在Primary這個菜單里，選擇“Add Items”。

右側會出現 Pages，里面就是主題自己帶的，以及剛剛建好的所有頁面。把新建的三個添加即可，它們會出現在左側菜單欄里。

添加頁面完畢后，選擇“Reorder”進行排序，上下箭頭是上下順序，左右箭頭是子集母集包含關系。

排序完畢后可以看到，菜單欄已經顯示在主頁的上方。網站建設又告一段落。

三、豐富個人網站

從菜單編輯的地方退出來是比較麻煩的，我一直沒找到比較合適的返回鍵。私以為，這個交互有點麻煩。我通常是把頂上的地址欄刪得只剩下Wordpress.com，就會回到自己的后臺。繼續(xù)選擇主頁編輯。

這時候可以先用預覽來看一下網站，也可以用手機打開自己的個人網站網址，看看有什么疏漏。

比如這個示例網站，首頁跟欄目都做得差不多了，主題圖片可以換掉也可以不換，里面的內容自己想文案，替換掉里面的鏈接，隨便導到哪里去都可以。

但往下翻，會發(fā)現，新建的四個相冊跟主題圖片緊貼著，非常難看；并且四個相冊只能換封面圖以及改改文字，沒有任何可點擊的地方。這是兩個需要處理的問題。

處理第一個“兩個區(qū)塊緊貼”的問題非常簡單，要么試著手動挪，要么添加一個“Heading”。

我選擇了最簡單的。點擊左上角的“+”號，在Blocks里選擇“Heading”，并且不曾輸入文字。結果則會如下圖一般，Heading自動將主題圖片與相冊分開。

處理第二個“相冊不可跳轉”的問題有許多解決方案。其中，這些相冊根據用途的不同，可以跳到各指定位置或各種頁面，甚至是之前新建好的三個頁面的指定位置。但為了方便舉例，我計劃新建一個頁面。

這個新頁面我選擇了Gallery里面的一個模板，圖片將呈現平鋪形式，并且左側會有一些關于這個相冊的簡介。

將頁面名字更改為相冊名“Brice”，并點擊發(fā)布。

發(fā)布頁面確認時，在右側把該頁面的鏈接復制下來。

隨后點擊左上角logo，回到后臺管理頁面。

選擇右下角的編輯主頁按鈕。

選定“Brice”字樣，在小編輯框中選擇右三的鏈接選項。其實年份也可以自動分類，只是這里其實沒這個需求。

將復制好的鏈接，輸入到鏈接框體中，按回車鍵確認。

此時，“Brice”顏色自動改變，下方有橫線，已經成功添加了新鍵的網頁鏈接。點擊右上角“Update”后，用個人網址進入自己的網站，點擊“Brice”即可跳轉（編輯頁面及預覽頁面基本無法跳轉）。

這個區(qū)域其實還可以設置成圖片中帶文字的模式。編輯框體中，方框內帶a的圖標即可做到。很多人還喜歡將圖片（無論有無文字）設置為跳轉鏈接。這個操作只需要點擊圖片，并在鏈接框體內加入剛剛復制好的頁面鏈接即可。

現在，無論是這個相冊的名字，還是這個相冊的封面，都可以通過點擊跳轉到另一個頁面了。其余的三個相冊用同樣的方式添加新頁面及鏈接即可。其他任意的文字也可以用這個方式進行跳轉。

更新網站后，登陸個人網站（非編輯頁面），即可得到如下這般的網站頁面，剩下的，就是把這個網站的圖片及文案，全部更新成自己的內容即可。每天做一點，就可以得到一個很棒的網站。

后記

事實上，無代碼建設的網站可以實現的功能還很多，包括網頁聯系、下訂單、費用支付等。做更多的功能也并沒有想象中的那么復雜，基本上都是添加模塊、頁面，鏈接等便可做到。

個人網站或者個人博客，需要經常花費時間去打理，有做個人作品集需要的人很值得擁有。也非常希望能看到這里的朋友，可以一起來探討更多的無代碼網站建設，多多聯系，多多交流。