如何制作網(wǎng)站，免費個人網(wǎng)站制作教程

時間：2022-08-29 21:03:01 | 來源：網(wǎng)站運營

時間：2022-08-29 21:03:01 來源：網(wǎng)站運營

這篇文章講的是如何制作網(wǎng)站以及免費個人網(wǎng)站制作教程，實際上這篇文章也可以看做是hexo使用教程，在這篇文章中我們將介紹如何使用hexo搭建免費個人網(wǎng)站。

網(wǎng)站制作前的準(zhǔn)備

想要搭建一個能夠通過互聯(lián)網(wǎng)訪問的網(wǎng)站就必須要有域名和服務(wù)器，域名是網(wǎng)站的門戶，我們一般都是通過域名來訪問網(wǎng)站并瀏覽網(wǎng)站中的內(nèi)容。服務(wù)器則可以看作是存放網(wǎng)站內(nèi)容的電腦，我們?yōu)g覽網(wǎng)站的過程實際上可以看作是使用瀏覽器這個軟件將服務(wù)器上存放的內(nèi)容下載到自己的電腦并通過瀏覽器顯示的過程。

域名

一般來說我們在網(wǎng)上購買的域名都是二級域名如：http://jcpgr.com，這種域名大都需要花錢才能購買，雖然網(wǎng)上也有一些免費的二級域名，但這些域名大都會有一些問題，如：只能使用一年到期后需花錢購買。因此這篇文章中使用的是github.com提供的三級域名如http://jcpgr.github.io。當(dāng)我們購買了二級域名后就會自動獲得對應(yīng)三級域名的所有權(quán)，因此我們只是http://jcpgr.github.io這個域名的使用者而不是所有者。

服務(wù)器

服務(wù)器是我們存放網(wǎng)站內(nèi)容的地方，在這篇文章中我們將使用hexo靜態(tài)博客生成器來制作網(wǎng)站，這個工具生成的網(wǎng)站屬于靜態(tài)網(wǎng)站，靜態(tài)網(wǎng)站由一個個頁面組成因此不需要與數(shù)據(jù)庫進行交互，因此我們可以將hexo生成的網(wǎng)站發(fā)布到http://github.com提供的倉庫中，并完成網(wǎng)站的部署。

其他說明

除了可以使用http://github.com網(wǎng)站制作個人網(wǎng)站，還可以使用http://gitee.com、http://coding.net等網(wǎng)站來搭建網(wǎng)站，具體的網(wǎng)站制作步驟與這篇文章中介紹的大同小異。另外如果要自己購買域名和服務(wù)器來制作網(wǎng)站那么可以參考下面鏈接中的文章來搭建網(wǎng)站。

如何制作網(wǎng)站

鏈接：https://pan.baidu.com/s/1MsaugTRmtuxTsDFHzDpBUA 提取碼：ewkq

1. 下載百度網(wǎng)盤中的Git-2.31.1-64-bit.exe和node-v14.17.0-x64.msi軟件并進行安裝，也可以從對應(yīng)的官網(wǎng)下載軟件進行安裝。
2. 安裝完成后，將鼠標(biāo)移動到桌面并右擊選擇Git Bash Here，隨后在git窗口中輸入node -v和npm -v檢查步驟一中的軟件是否安裝完成
3. 在窗口輸入npm install -g hexo-cli命令并按下enter鍵執(zhí)行，安裝hexo客戶端（因為我的電腦上已經(jīng)執(zhí)行過這個命令，所以示例圖片中的返回和第一次安裝的返回可能有所不同）
4. 使用hexo init wz命令在桌面生成wz文件夾，接下來的操作都會在這個文件夾中進行
5. 使用cd wz命令進入wz文件夾
6. 使用npm install命令生成網(wǎng)站模板，這時我們已經(jīng)在本地完成了最簡單的個人網(wǎng)站制作
7. 使用hexo server命令運行上一步驟生成的網(wǎng)站，命令執(zhí)行后可以通過在瀏覽器上輸入localhost:4000來查看正在運行的網(wǎng)站
8. 同時按下鍵盤上的ctrl和c鍵，終止網(wǎng)站在本地的運行

部署制作完成的網(wǎng)站

1. 在http://github.com網(wǎng)站上注冊賬號，并點擊Create repository創(chuàng)建倉庫（步驟一），其中倉庫名設(shè)置為【用戶名.http://github.io】（步驟二）如果設(shè)置的是其他名稱如：test，那么網(wǎng)站的最終訪問路徑就會變?yōu)椤居脩裘?http://github.io/test】
2. 創(chuàng)建倉庫時選中Add a README file，這時生成倉庫后會自動生成README.md文件（步驟二）
3. 點擊Settings（步驟三）并在跳出的頁面中的最下方點擊Check it out here（步驟四），此時最簡單的網(wǎng)站已經(jīng)生成。
4. 因為此時倉庫中只有README.md文件，因此我們可以通過https://jcpgr.github.io/README.md來查看網(wǎng)站中的這個文件。
5. 打開上一章節(jié)的wz目錄，右擊鼠標(biāo)選擇Git Bash Here并執(zhí)行npm install hexo-deployer-git --save命令（步驟五），我們需要使用hexo-deployer-git將hexo文件部署到github倉庫中。
6. 執(zhí)行命令git config --global user.name "用戶名"和git config --global user.email "郵箱"（步驟六），使用這兩個命令來初始化git。
7. 執(zhí)行命令ssh-keygen -t rsa -C "郵箱"并按下enter鍵三次（步驟七），這個命令是為了生成密鑰，其中【郵箱】應(yīng)該填寫自己的郵箱。這個密鑰用于git這個軟件登錄github倉庫。
8. 執(zhí)行命令cat ~/.ssh/id_rsa.pub獲取生成的密鑰（步驟七），并點擊http://github.com網(wǎng)站頭像下方Settings，在彈出的頁面中選擇SSH and GPG keys，隨后選擇New SSH key，并將密鑰粘貼到key對應(yīng)的方框中。（步驟八）
9. 執(zhí)行命令ssh -T git@github.com查看密鑰是否設(shè)置成功，成功則會顯示用戶名（步驟七）
10. 打開上一章節(jié)wz目錄下的文件_config.yml，并將文件中的最后兩行用下方的代碼替換，其中【用戶名】需要替換為實際用戶名如：jcpgr

deploy: type: git repository: git@github.com:用戶名/用戶名.github.io.git branch: main最后，分別執(zhí)行hexo clean（刪除上一次hexo generate生成的文件）、hexo generate（生成網(wǎng)站內(nèi)容）、hexo deploy（將網(wǎng)站內(nèi)容推送到github）命令，將本地的網(wǎng)站推送到github，等待幾分鐘后再次通過https://jcpgr.github.io來訪問網(wǎng)站

步驟一：

步驟二：

步驟三：

步驟四：

步驟五：

步驟六：

步驟七：

步驟八：

步驟九：

步驟十：

網(wǎng)站搭建教程中的其他說明

可以通過hexo server命令，在本地運行網(wǎng)站并查看文章效果。

生成新的網(wǎng)頁內(nèi)容

使用hexo new post "測試文章"命令，生成新的網(wǎng)頁內(nèi)容，隨后再次執(zhí)行hexo clean、hexo generate、hexo deploy命令，將網(wǎng)站推送到github，等待幾分鐘后再次通過https://jcpgr.github.io來訪問網(wǎng)站，此時名為【測試文章】的網(wǎng)頁已經(jīng)可以在網(wǎng)站上看到了。

顯示圖片和修改網(wǎng)頁

使用hexo new post "測試文章"命令生成的網(wǎng)頁位于/wz/source/_post目錄下，打開【測試文章.md】即可對文章內(nèi)容進行修改，不需要懂得如何修改網(wǎng)頁只需要了解markdown語法就可以修改網(wǎng)頁。在source目錄下新建image文件夾并在文件夾中放入test.png圖片，隨后在【測試文章.md】使用下方代碼中的字段，就可以實現(xiàn)圖片的引用。

![測試圖片](./image/test.png)

修改文章路徑

我們可以看到上一步驟中【測試文章.md】對應(yīng)的網(wǎng)頁路徑之前有年月日的時間，我們可以通過修改wz文件夾中_config.yml的第十七行來除掉它們，將permalink: :year/:month/:day/:title/修改為permalink: :title.html

修改網(wǎng)站主題

hexo有很多不錯的網(wǎng)站主題，各種主題的安裝方法可以在對應(yīng)主題的網(wǎng)站上找到，一般我們在百度上搜索“hexo主題”查詢到的第一個就會看到各式各樣的主題。下面我們以butterfly這個主題為例，來進行說明。

• 打開wz目錄，右擊鼠標(biāo)選擇Git Bash Here
• 執(zhí)行下方命令安裝圖片渲染器

npm install hexo-renderer-pug hexo-renderer-stylus --save

• 執(zhí)行下方命令將主題下載到本地的wz/theme文件夾

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

• 將_config.yml文件中theme對應(yīng)的值更換為對應(yīng)的主題名稱，如butterfly
• 再次部署網(wǎng)站時，網(wǎng)站主題就會更換為butterfly