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

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

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

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

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

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

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

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

建立WordPress賬號以后，跳轉(zhuǎn)到的是域名界面。這個(gè)區(qū)域可以使用自己已經(jīng)擁有的域名，也可以買一個(gè)全新的域名，不過為了將免費(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)址可以專門存下來，之后經(jīng)常會(huì)用到，并且在很長的時(shí)間里，這便是自己網(wǎng)站的網(wǎng)址了。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

后記

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

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