此前曾提過(guò)，我近期沉迷于用無(wú)代碼的方式建設(shè)個(gè)人網(wǎng)站，還立下Flag，說(shuō)一定會(huì)更一期入門版的DIY教程。拖了許久，我今天終于帶著56張圖片來(lái)交差了……

建設(shè)無(wú)代碼網(wǎng)站的方式有許多，我好友用的是Squarespace，效果相當(dāng)出彩，我因?yàn)橛胁┛偷木壒剩玫氖荳ordPress。其實(shí)我覺(jué)得市面上應(yīng)該有不少類似的工具，隨便選一家應(yīng)該都有相似的效果。

剛開(kāi)始時(shí)，我因?yàn)椴皇煜じ鞣N模塊，用無(wú)代碼版建網(wǎng)站時(shí)很憋屈。因此，我轉(zhuǎn)頭用上了WordPress的.org版，吭哧吭哧地折騰了幾天，幸而效果還不錯(cuò)。后來(lái)不甘心于建個(gè)網(wǎng)站都比別人艱難，于是又研究回了WordPress的.com版。

近日又折騰了許久，總算對(duì)無(wú)代碼版網(wǎng)站的建設(shè)有了得心應(yīng)手的感覺(jué)。本次更的就是這個(gè)版本的教程。

一、建設(shè)個(gè)人主頁(yè)

WordPress有多個(gè)語(yǔ)言版本，我剛開(kāi)始時(shí)跳轉(zhuǎn)的中文版，刷新幾次后莫名就跳回了英文版，但我對(duì)比過(guò)多語(yǔ)言的后臺(tái)，其實(shí)大致都一樣，主要是語(yǔ)言以及一些社交軟件及支付方式方面的區(qū)別。以下截圖來(lái)自于英文版。

我是從注冊(cè)新郵箱開(kāi)始做的教程，不過(guò)后來(lái)一想，也不會(huì)有什么人沒(méi)有電子郵箱了，這一步干脆略過(guò)。直接在搜索引擎搜“WordPress”，隨后進(jìn)入到Wordpress.com的網(wǎng)站建設(shè)指引，接著會(huì)出現(xiàn)以下界面，我選的是免費(fèi)版。

接下來(lái)，輸入自己的任意一個(gè)郵箱地址，擬一個(gè)用戶名，以及設(shè)定密碼。

建立WordPress賬號(hào)以后，跳轉(zhuǎn)到的是域名界面。這個(gè)區(qū)域可以使用自己已經(jīng)擁有的域名，也可以買一個(gè)全新的域名，不過(guò)為了將免費(fèi)進(jìn)行到底，我不打算在域名上花錢，就隨便想了個(gè)名字。以后要是想要有個(gè)好域名，也可以隨時(shí)添加或更改。

作為一個(gè)起名廢柴，我把魔獸世界里的各個(gè)主角的名字都想了一遍，最后選定了風(fēng)元素領(lǐng)主奧拉基爾，于是用了windlord作為站點(diǎn)名稱的關(guān)鍵字。隨后在各種示意例子中，我選擇了免費(fèi)的網(wǎng)址。這時(shí)候，這個(gè)選定的網(wǎng)址可以專門存下來(lái)，之后經(jīng)常會(huì)用到，并且在很長(zhǎng)的時(shí)間里，這便是自己網(wǎng)站的網(wǎng)址了。

選定了域名，自然就開(kāi)始了正式的建站之旅。網(wǎng)頁(yè)將跳轉(zhuǎn)并自動(dòng)進(jìn)入到建設(shè)網(wǎng)站的后臺(tái)。其中“Name your site”這個(gè)紫紅色按鍵就是進(jìn)入下一步的關(guān)鍵入口，隨后的步驟，就如右邊被我用紅色線條框起來(lái)的差不多。

就如先前所說(shuō)的那樣，我將我的新網(wǎng)站，起名為Windlord，意即“馭風(fēng)者”，還隨手寫(xiě)了句標(biāo)語(yǔ)：The rider of the wind element。

給網(wǎng)站起名后，就到了最重要的一步：編輯主頁(yè)。同樣是在紫紅色按鈕處進(jìn)入。

編輯主頁(yè)的時(shí)候，會(huì)如下圖一般，出現(xiàn)一些講解頁(yè)面，看一看還是很有必要的。不看的話，其實(shí)也不影響我之后講解的步驟。

我在主頁(yè)編輯頁(yè)面，隨意選了一個(gè)風(fēng)格，其實(shí)也可以選空白頁(yè)或者其他風(fēng)格。但我一直認(rèn)為，建網(wǎng)站從最容易的地方開(kāi)始，出成果越簡(jiǎn)單，成就感就來(lái)得越快，也就有更多的動(dòng)力去折騰。

除了主題圖片可以進(jìn)行編輯以外，網(wǎng)頁(yè)下拉后是博客的最新更新示例。事實(shí)上，就一個(gè)網(wǎng)站而言，這些內(nèi)容顯得太少了，就像個(gè)博客的主頁(yè)一般。不過(guò)WordPress是靠博客起家的，有這個(gè)毛病也無(wú)可厚非。

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

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

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

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

點(diǎn)擊發(fā)布按鈕后，WordPress看起來(lái)還是想要再努力一把，于是又出現(xiàn)了誘拐買域名或者定制會(huì)員的行為。不過(guò)我還是相當(dāng)堅(jiān)定地選擇了免費(fèi)版。

至此，一個(gè)簡(jiǎn)易的網(wǎng)站算是正式發(fā)布成功了，如果單純就是玩玩，可以開(kāi)始往里面寫(xiě)一點(diǎn)內(nèi)容，算是有了個(gè)自己的網(wǎng)站雛形了。

二、網(wǎng)頁(yè)跳轉(zhuǎn)

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

建設(shè)新的頁(yè)面時(shí)，從屏幕的左上角選擇帶有“W”字樣的WordPress的logo。隨后在左下角點(diǎn)擊“Add new page”，增加一個(gè)新頁(yè)面。

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

我選擇了默認(rèn)里的Portfolio，這是一個(gè)頁(yè)首是幻燈片頁(yè)面內(nèi)有多個(gè)項(xiàng)目可以編輯的形式。

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

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

新建的頁(yè)面計(jì)劃講訴生活方面的內(nèi)容，因而選擇了“Gallery”里面的模板。

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

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

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

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

三個(gè)頁(yè)面建設(shè)完畢后，選擇“Dashboard”,回到個(gè)人后臺(tái)。

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

進(jìn)入菜單編輯頁(yè)面。

選擇自動(dòng)呈現(xiàn)的“Primary”。

在Primary這個(gè)菜單里，選擇“Add Items”。

右側(cè)會(huì)出現(xiàn) Pages，里面就是主題自己帶的，以及剛剛建好的所有頁(yè)面。把新建的三個(gè)添加即可，它們會(huì)出現(xiàn)在左側(cè)菜單欄里。

添加頁(yè)面完畢后，選擇“Reorder”進(jìn)行排序，上下箭頭是上下順序，左右箭頭是子集母集包含關(guān)系。

排序完畢后可以看到，菜單欄已經(jīng)顯示在主頁(yè)的上方。網(wǎng)站建設(shè)又告一段落。

三、豐富個(gè)人網(wǎng)站

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

這時(shí)候可以先用預(yù)覽來(lái)看一下網(wǎng)站，也可以用手機(jī)打開(kāi)自己的個(gè)人網(wǎng)站網(wǎng)址，看看有什么疏漏。

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

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

處理第一個(gè)“兩個(gè)區(qū)塊緊貼”的問(wèn)題非常簡(jiǎn)單，要么試著手動(dòng)挪，要么添加一個(gè)“Heading”。

我選擇了最簡(jiǎn)單的。點(diǎn)擊左上角的“+”號(hào)，在Blocks里選擇“Heading”，并且不曾輸入文字。結(jié)果則會(huì)如下圖一般，Heading自動(dòng)將主題圖片與相冊(cè)分開(kāi)。

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

這個(gè)新頁(yè)面我選擇了Gallery里面的一個(gè)模板，圖片將呈現(xiàn)平鋪形式，并且左側(cè)會(huì)有一些關(guān)于這個(gè)相冊(cè)的簡(jiǎn)介。

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

發(fā)布頁(yè)面確認(rèn)時(shí)，在右側(cè)把該頁(yè)面的鏈接復(fù)制下來(lái)。

隨后點(diǎn)擊左上角logo，回到后臺(tái)管理頁(yè)面。

選擇右下角的編輯主頁(yè)按鈕。

選定“Brice”字樣，在小編輯框中選擇右三的鏈接選項(xiàng)。其實(shí)年份也可以自動(dòng)分類，只是這里其實(shí)沒(méi)這個(gè)需求。

將復(fù)制好的鏈接，輸入到鏈接框體中，按回車鍵確認(rèn)。

此時(shí)，“Brice”顏色自動(dòng)改變，下方有橫線，已經(jīng)成功添加了新鍵的網(wǎng)頁(yè)鏈接。點(diǎn)擊右上角“Update”后，用個(gè)人網(wǎng)址進(jìn)入自己的網(wǎng)站，點(diǎn)擊“Brice”即可跳轉(zhuǎn)（編輯頁(yè)面及預(yù)覽頁(yè)面基本無(wú)法跳轉(zhuǎn)）。

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

現(xiàn)在，無(wú)論是這個(gè)相冊(cè)的名字，還是這個(gè)相冊(cè)的封面，都可以通過(guò)點(diǎn)擊跳轉(zhuǎn)到另一個(gè)頁(yè)面了。其余的三個(gè)相冊(cè)用同樣的方式添加新頁(yè)面及鏈接即可。其他任意的文字也可以用這個(gè)方式進(jìn)行跳轉(zhuǎn)。

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

后記

事實(shí)上，無(wú)代碼建設(shè)的網(wǎng)站可以實(shí)現(xiàn)的功能還很多，包括網(wǎng)頁(yè)聯(lián)系、下訂單、費(fèi)用支付等。做更多的功能也并沒(méi)有想象中的那么復(fù)雜，基本上都是添加模塊、頁(yè)面，鏈接等便可做到。

個(gè)人網(wǎng)站或者個(gè)人博客，需要經(jīng)?；ㄙM(fèi)時(shí)間去打理，有做個(gè)人作品集需要的人很值得擁有。也非常希望能看到這里的朋友，可以一起來(lái)探討更多的無(wú)代碼網(wǎng)站建設(shè)，多多聯(lián)系，多多交流。