個(gè)人網(wǎng)站DIY搭建--無(wú)需編程背景，手把手教程指南

時(shí)間：2023-10-16 11:54:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-16 11:54:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

個(gè)人網(wǎng)站DIY搭建--無(wú)需編程背景，手把手教程指南：

介紹

這個(gè)教程會(huì)手把手帶大家DIY搭建一個(gè)酷炫（花里胡哨）易維護(hù)且免費(fèi)（重點(diǎn)）的個(gè)人網(wǎng)站。因?yàn)闀?huì)用到WordPress，有很多免費(fèi)的模版可供使用，學(xué)術(shù)，極客，設(shè)計(jì)師，個(gè)人店鋪，博客等等全職業(yè)都適用。本教程不要求懂任何編程知識(shí)（除了知道PHP是世界上最好的語(yǔ)言這個(gè)常識(shí)外）。

要點(diǎn)總結(jié)

• 網(wǎng)站網(wǎng)站展示為（GitHub用戶名+github.io）: https://GitHub用戶名.github.io
• host在GitHub page ，永久免費(fèi)
• 利用WordPress制作，簡(jiǎn)單高效，易維護(hù)，且不需要編程知識(shí)
• WordPress杭州量模板（免費(fèi)與付費(fèi)都有）可供使用，可迅速制作出不同風(fēng)格的網(wǎng)站

網(wǎng)站展示

可以進(jìn)入我自己的主頁(yè)作為參考：https://flint-xf-fan.github.io

要求/準(zhǔn)備

• GitHub賬號(hào)
• 能搭建本地WordPress的電腦（本教程默認(rèn)使用MacOS操作系統(tǒng)）

1. 搭建本地WordPress網(wǎng)站

這個(gè)教程的第一步，是在本地搭建一個(gè)WordPress網(wǎng)站。簡(jiǎn)單來(lái)說(shuō)，WordPress是一個(gè)開(kāi)源的個(gè)人博客搭建軟件和其內(nèi)容管理系統(tǒng)，以最好的語(yǔ)言 PHP和MySQL為平臺(tái)。使用WordPress能讓很多不懂編程的人也能較為容易地搭建，管理和裝飾個(gè)人博客，甚至是商業(yè)用途的網(wǎng)站。本教主要適用于個(gè)人非商業(yè)用途網(wǎng)站搭建。

不同操作操作系統(tǒng)安裝WordPress的步驟會(huì)有所不同。本教程主要以MacOS為例進(jìn)行示范，等回新加坡后用主機(jī)出Windows和Linux的。

安裝MAMP（Macintosh, Apache, MySQL, and PHP）

從MAMP官網(wǎng)下載對(duì)應(yīng)的MAMP安裝包。本教程使用的CPU為Apple M1 Pro，所以選擇第二個(gè)MAMP & MAMP PRO （Apple）下載。




MAMP安裝完成后，在application folder里找到MAMP folder，如圖所示。

下載WordPress

從WordPress.org 官網(wǎng)下載WordPress安裝包。

解壓下載的壓縮包，得到wordpress的文件夾。將整個(gè)解壓得到的wordpress 整個(gè)文件夾移動(dòng)到上面提到的MAMP的文件夾里

再創(chuàng)建Applications/MAMP/htdocs/allwebsites 的子文件夾，并復(fù)制wordpress文件夾進(jìn)入其中，即Applications/MAMP/htdocs/allwebsites/wordpress 如圖所示

創(chuàng)建MySQL數(shù)據(jù)庫(kù) - 使用MAMP

運(yùn)行MAMP應(yīng)用，點(diǎn)擊如圖所示Start 圖標(biāo)，

瀏覽器則會(huì)打開(kāi)下圖所示頁(yè)面

點(diǎn)擊Tools >> phpMyAdmin ，并點(diǎn)擊Database 并輸入一個(gè)數(shù)據(jù)庫(kù)名字，點(diǎn)擊Create , 此時(shí)用WordPress的數(shù)據(jù)庫(kù)便創(chuàng)建好了。

安裝WordPress

打開(kāi)瀏覽器，地址欄輸入http://localhost:8888 。如果不懂CS相關(guān)知識(shí)，簡(jiǎn)單地將這一步理解為使用瀏覽器打開(kāi)計(jì)算機(jī)本地某個(gè)運(yùn)行的程序即可。如圖：

這里會(huì)讓選擇鏈接。記得上面下載WordPress時(shí)創(chuàng)建的folder: Applications/MAMP/htdocs/allwebsites/wordpress 嗎，這里只需要點(diǎn)擊進(jìn)到wordpress folder就可以進(jìn)入如下圖所示wordpress 安裝界面了：

選擇熟悉的語(yǔ)言安裝后，來(lái)到下述頁(yè)面，填入相應(yīng)內(nèi)容，如圖所示

點(diǎn)擊Submit后再點(diǎn)擊Run the installation。依次輸入你的網(wǎng)站名，管理用戶名，密碼，郵箱。 這里密碼串MgxPW8d8J7wM!RoCYi 是系統(tǒng)自動(dòng)生存的，需要手動(dòng)保存。以后登陸會(huì)用到。

最后點(diǎn)擊Install WordPress，網(wǎng)頁(yè)則顯示Success，安裝成功。此時(shí)，已經(jīng)可以通過(guò)瀏覽器訪問(wèn)http://localhost:8888/allwebsites/wordpress/ 來(lái)看到剛剛建好的網(wǎng)站是什么樣子了。下面是我剛剛建好的：

登陸WordPress編輯網(wǎng)站

網(wǎng)站搭建成功后，可以使用瀏覽器進(jìn)入http://localhost:8888/allwebsites/wordpress/wp-login.php ，此時(shí)便會(huì)進(jìn)入管理員登陸頁(yè)面：

輸入上一步安裝WordPress時(shí)使用的用戶名和密碼，然后點(diǎn)擊Log In

登陸成功后，便可進(jìn)入系統(tǒng)管理臺(tái)。在這里可以進(jìn)行一系列網(wǎng)站的管理，內(nèi)容編輯，裝飾等等操作。而這些操作都不再需要任何技術(shù)上的難點(diǎn)。簡(jiǎn)單來(lái)說(shuō)，QQ空間 ：）

接下來(lái)，（參見(jiàn)目錄）我們需要做的是選擇喜歡的網(wǎng)頁(yè)模版，編輯內(nèi)容，再把網(wǎng)站導(dǎo)出成靜態(tài)static pages，并host到github上。本教程也會(huì)涵蓋一些炫酷的小功能，比如第3點(diǎn)的Timeline子頁(yè)面以及網(wǎng)站下的訪客圖等。未完待續(xù)。。。

碼字不易，煩請(qǐng)三連，有空就更。

2. 編輯裝飾網(wǎng)站

3. 定制時(shí)間線Timeline子頁(yè)面

4. 添加網(wǎng)站訪客圖Flag Counter

5. 導(dǎo)出網(wǎng)站并host到GitHub上