2023年如何從頭開始製作網站(詳細教程)

已發表: 2023-07-07

在線存在有多種形式。 其中之一就是擁有自己的網站。 無論是您的企業還是個人品牌,擁有網站都可以幫助您提昇在線形象。 我們將向您展示如何從頭開始製作網站,以幫助您盡快建立並運行您的網站。 我們將為您提供所需的所有基本步驟! 總共,我們將完成 13 個步驟。 這篇文章應該可以幫助您在計劃建立自己的網站時制定清晰的行動計劃。

讓我們開始吧。

目錄
  • 1我需要知道如何編碼嗎?
  • 2第 1 步:CMS 還是網站構建器?
  • 3第 2 步:選擇託管提供商
    • 3.1託管類型
    • 3.2我們的推薦:SiteGround
  • 4第 3 步:選擇您的域
    • 4.1.COM _
    • 4.2讓它容易記住
    • 4.3註冊您的域名
  • 5第 4 步:安裝 WordPress.org
    • 5.1自動安裝
  • 6第 5 步:規劃網站的結構
    • 6.1需要考慮的頁面
  • 7第 6 步:選擇您的主題
    • 7.1主題類型
    • 7.2我們的主要推薦:Divi
  • 8第 7 步:安裝插件
    • 8.1基本插件
    • 8.2可選插件
  • 9第 8 步:創建您的第一個頁面
    • 9.1添加新頁面
    • 9.2選擇預製佈局
    • 9.3更改內容和圖像
    • 9.4保存並發布
  • 10第 10 步:創建附加頁面
  • 11第 11 步:創建網站的導航
    • 11.1選擇主頁
    • 11.2創建主菜單
  • 12第 12 步:需要考慮的其他事項
    • 12.1創建頁眉和頁腳
    • 12.2創建模板
    • 12.3優化你的搜索引擎優化
    • 12.4針對移動設備進行優化
  • 13第 13 步:維護您的網站
    • 13.1定期更新
    • 13.2測量數據
  • 14最後的想法

我需要知道如何編碼嗎?

對於網站來說,了解如何編碼曾經是至關重要的。 儘管強烈建議您具有一些基本的 Web 開發背景,但這不是必需的。 許多工具專注於使網站構建成為一種視覺體驗。 這就是我們在這篇文章中將採用的方法。 您不需要技術專業知識來遵循本教程並從頭開始創建一個網站。

第 1 步:CMS 還是網站構建器?

WordPress.org

決定建立自己的網站時,您有兩個主要選擇:

  1. 內容管理系統
  2. 網站建設者

內容管理系統(例如 WordPress)可讓您控製網站的各個方面,包括託管。 它們通常也是免費的。 這兩個選項的結合使內容管理系統成為最受歡迎的選項。

另一方面,網站建設者將您鎖定在他們的託管平台上。 您的控制權較少,並且您經常被網站構建器困住,如果您對軟件感到失望,這可能會導致您“陷入困境”。

我們的選擇:對於本實用教程,我們將選擇 WordPress.org。 它是免費的,具有合理的學習曲線,並且有許多選項可以讓您的網站煥發活力。

第 2 步:選擇託管提供商

選擇託管提供商是您製作網站時必須做出的下一個重要決定。 託管計劃有很多,因此可能只見樹木不見森林。 我們將盡力盡可能輕鬆地為您安排。

託管類型

託管選項根據網站流量而有所不同。 對於低流量,可以使用共享託管,但您將共享存儲和資源。 對於大多數人來說,託管 WordPress 託管更好,因為它可以處理安全和技術問題。 那些需要強大解決方案的人可以考慮 VPS 託管——這是具有類似功能的專用託管的更便宜的替代方案。 有關選擇正確 WordPress 託管的更多指導,請參閱我們有關類型和選擇的綜合文章。

我們的推薦:SiteGround

SiteGround WordPress 託管

我們假設您想要構建一個簡單的網站,並且預計流量不會太多。 在這種情況下,共享託管計劃將發揮作用(目前)。 您始終可以擴展您的託管選項。 我們推薦的託管是 SiteGround。 它在 Trustpilot 上的評分為 4.4 分(滿分 5 分),是當之無愧的。 他們的平台和託管解決方案優先考慮客戶及其需求。

價錢

站點地面定價

SiteGround 提供三種計劃:StartUp 每月 14.99 美元,GrowBig 每月 24.99 美元,GoGeek 每月 39.99 美元。 在本教程中,我們將選擇 GoGeek 計劃,該計劃將為我們提供 40GB 的網絡空間、每月 400,000 次訪問,以及一些幫助我們入門的出色功能。

創建 SiteGround 帳戶

下一步是創建您的帳戶。 首先選擇一個計劃(對於我們來說,這是 GoGeek 計劃),然後按照步驟註冊新域或添加您當前的域。

選擇一個域

最後,添加帳戶信息,例如您的電子郵件和密碼、客戶信息、付款信息和託管期限:每月或每年。

創建 SiteGround 帳戶

第 3 步:選擇您的域

選擇託管提供商後,您可以繼續選擇域名(如果您還沒有域名)。

.COM

最流行的 URL 以 .com 結尾。 它紮根於我們的大腦中。 默認情況下,我們傾向於比其他域名更信任.com域名,這對品牌產生了積極影響。

讓它令人難忘

無論您是否使用 .com 域名,讓您的域名易於記住都很重要。 尤其是從長遠來看,您不想讓您的訪客和客戶很難在網上找到您。

註冊您的域名

有許多域名註冊商可供選擇,但選擇一家好的域名註冊商很重要。 一些最好的域名註冊商是 Namecheap 或 SiteGround,但請務必進行研究以確定哪個最適合您。

第 4 步:安裝 WordPress.org

一旦您的主機和域名就位,就可以在您的網站上安裝 WordPress 了。 選擇 WordPress 勝過任何其他選項的理由有很多。 首先,它成為最受歡迎的 CMS 是有原因的。 它直觀、開源並且允許完全定制。 您還擁有無盡的主題和插件選項。 您無需支付一毛錢即可在您的網站上使用 WordPress.org,這也沒什麼壞處!

自動安裝

要在您的 SiteGround 域上設置 WordPress,您可以導航到您的 SiteGround 帳戶的主頁,然後單擊設置站點

設立網站

選擇您網站的新域、現有域或臨時域,然後單擊繼續

選擇域名

接下來,選擇開始新網站

開始新網站

然後,選擇WordPress ,輸入您的電子郵件地址並創建密碼。 接下來,單擊繼續

WordPress 登錄憑據

第 5 步:規劃網站的結構

此時,您的網站環境已準備好,可以開始考慮您的網站將呈現的形狀。 重要的是要考慮您希望網站的外觀以及您需要什麼功能。 單尋呼機可以嗎? 您需要一些小冊子類型網站的基本頁面嗎? 您需要電子商務功能嗎? 為了本教程的目的,我們將偏離構建宣傳冊網站的目標。

需要考慮的頁面

如果您正在建立一個宣傳冊網站,將會有一些不可或缺的頁面:

  • 關於
  • 接觸

最重要的是,根據網站的用途,您可能會發現自己添加了更多專門用於以下內容的頁面:

  • 服務
  • 文件夾
  • 博客

網站結構沒有正確或錯誤之分; 您必須找到適合您、您的網站和網站目標的選項。

第 6 步:選擇您的主題

一旦您的 WordPress 環境準備就緒,就可以開始工作了! 使用 WordPress 時,您可以設置主題。 該主題構成了您網站的基礎。 根據您想要添加到網站的功能,選擇正確的主題將是重要的一步。

主題類型

WordPress 有多種不同的主題供您選擇。 最流行的主題是多用途的,通常包括視覺生成器。 原因是它提供的靈活性。 還有一些專門針對電子商務網站或投資組合網站定制的主題。 根據您正在尋找的主題類型,您可以查看我們的熱門推薦的不同列表。

我們的主要推薦:Divi

選擇迪維

我們將為本教程中接下來的(實際)步驟選擇一個主題。 我們建議您為您構建的任何網站使用我們自己的 Divi。 Divi 是一個多用途主題,包括無代碼設計 Visual Builder,使構建網站變得非常直觀。 Divi 具有廣泛的功能,超過 200 個可定制元素,以及超過 2200 個專業設計的佈局供您選擇! 無論您想要創建什麼類型的網站,很有可能有一個專門針對該特定業務的佈局包。

價錢

優雅的主題定價

Divi 為您提供兩種會員資格選項:年度會員資格和終身會員資格。 您可以支付 89 美元/年的年費會員資格,或支付 249 美元的一次性費用獲得終身會員資格。

成為迪維會員

要成為 Divi 會員,請導航至我們的加入頁面。 或者,利用今天的 10% 折扣!

註冊成為會員後,您可以導航至會員專區。

優雅主題會員區

下載迪維

在這裡,您可以下載 Divi 主題文件。

下載迪維

在您的 WordPress 網站上安裝 Divi

下載 Divi 後,導航到 WordPress 儀表板,將鼠標懸停在左側邊欄中的“外觀”菜單項,然後單擊“主題”

WordPress 主題

在頁面頂部,您會注意到一個顯示“添加新項”的按鈕。 單擊此按鈕。

添加新主題

然後,單擊“上傳主題”

上傳主題

搜索您在本教程前一部分中下載的 Divi 壓縮文件夾,然後單擊“立即安裝”

現在安裝

一旦您成功完成此操作,您也將能夠激活主題!

激活迪維

Divi 現在可供您使用。

將 API 密鑰添加到 Divi 主題選項

要訪問 Divi 為您提供的所有免費佈局,您需要將 API 密鑰添加到 Divi 主題選項中。 您可以通過導航到您的會員區來查找(並創建)API 密鑰。 到達那里後,將鼠標懸停在帳戶上。

優雅的主題帳戶

接下來,單擊用戶名和 API 密鑰

獲取API密鑰

您可以在 API 密鑰區域中創建和復制新的 API 密鑰。

生成新的 API 密鑰

要將 API 密鑰添加到您的 Divi 主題選項中,您需要用戶名和 API 密鑰。

接下來,導航到您的 WordPress 儀表板。 將鼠標懸停在左側邊欄中的“Divi”菜單項 (1),然後單擊“主題選項”(2)。 轉到“更新”選項卡 (3)。 您可以在此處添加您的用戶名 (4) 和 API 密鑰 (5)。 確保保存更改 (6)。

Divi 主題選項

第7步:安裝插件

WordPress 的另一個重要部分是安裝插件的能力。 實際上有數千個插件可以幫助滿足不同的需求。 讓我們看看您想要為您的網站考慮哪些插件。

必備插件

每個 WordPress 網站都需要一些必要的插件才能取得成功。 您需要安裝 SEO、安全插件和其他優秀的 WordPress 插件,以幫助您保持網站處於最佳狀態。

搜索引擎優化

WordPress 開箱即用,對 SEO 友好,但如果您想在搜索引擎排名頁面 (SERP) 中獲得更高的排名,則需要一些幫助。 值得慶幸的是,有一些優秀的 SEO 插件,例如 Rank Math,可以確保您的網站很容易被潛在客戶發現。

安全

另一個需要考慮的重要方面是可靠的安全插件,例如 iThemes Security。 確保防範惡意軟件、機器人和 DDoS 攻擊至關重要。 超過 44% 的互聯網建立在 WordPress 上,它成為惡意行為者的主要目標。

可選插件

除了 SEO 和安全插件之外,一些可選插件可以增強您的網站。 考慮使用聊天、時事通訊、社交媒體或其他可選插件,使您的網站成為潛在客戶的發電站。

聊天

最好的 WordPress 聊天插件

客戶參與對於您網站的成功至關重要。 您應該考慮安裝一個好的聊天插件,例如 Tidio,以使客戶更容易接近您。 無論您需要自動化客戶體驗還是為您的網站提供實時代理,聊天插件都是為訪問者提供他們渴望的答案的絕佳方式。

通訊

最好的 WordPress 時事通訊插件

如果您希望增加潛在客戶並擴大客戶群,那麼像 Bloom 這樣的時事通訊插件就適合您。 這是擴大客戶群、向他們提供有用信息以及跟踪網站參與度的絕佳方式。

社交媒體

最好的 WordPress 社交媒體插件

將社交媒體源連接到 WordPress 網站是提高網站和社交媒體帳戶可見性的絕佳方法。 使用 Monarch 等優秀的社交媒體插件,您可以嵌入來自 Facebook、YouTube 等的社交媒體源。

和更多

最好的 WordPress 插件

無論您需要備份、加速還是增強網站功能的解決方案,優秀的 WordPress 插件都可以幫助您實現目標。 查看我們的 31 個最佳 WordPress 插件帖子,讓您更深入地了解可以使用哪些插件來使您的 WordPress 網站達到最佳狀態。

第 8 步:創建您的第一個頁面

此時,我們可以自信地開始創建我們想要在網站上展示的頁面! 如果您剛開始構建網站,這部分可能會讓人不知所措。 雖然製作網站很容易,但有時會導致信息過載。 讓自己在需要時以全新的心態處理和返回信息。

添加新頁面

導航到您的 WordPress 儀表板。 到達那里後,將鼠標懸停在頁面上並單擊添加新的

添加新的 WordPress 頁面

給你的頁面一個標題。 在本例中,我們將其稱為Home

為您的 WordPress 頁面命名

您可以將頁面另存為草稿,或將其發布以開始處理。

保存您的頁面

準備就緒後,單擊“使用 Divi Builder ”切換到 Divi。

使用 Divi 生成器

選擇預製佈局

Divi 是一個直觀的工具,如果您學習了基礎知識,您可以從頭開始創建任何頁面。 但為了幫助加快這一過程,Divi 提供了 100 多個網站包,其中包含 2200 多種佈局! 有如此多的可用選項,您將找到適合您網站需求的網站包。 我們每週都會發布一個新的佈局包!

Divi 佈局包

要將佈局上傳到您的頁面,請選擇中間的選項瀏覽佈局

瀏覽佈局

觀看我們的佈局包和佈局庫的展開!

Divi 佈局選項

如果您正在尋找特定的佈局包,可以使用左側邊欄中的搜索欄。

佈局搜索

出於本教程的目的,我們將使用營銷佈局包的主頁佈局。 我們只需在搜索欄中輸入“營銷”即可。

迪威營銷佈局

然後,我們將選擇營銷主頁。

營銷主頁

這將引導我們進入佈局包的整個預覽。

營銷預覽

要上傳主頁,請單擊顯示“使用此佈局”的藍色按鈕。

很快,您的頁面將被佈局所取代!

導入佈局

更改內容和圖像

佈局是很好的起點,但仍然需要根據網站的需求進行微調。 您可以隨心所欲地進行此操作。 Divi 是一個可視化構建器,允許您添加新的部分、行、列、模塊等。 它還具有許多可加快設計過程的高效功能。

我們將通過僅更改內容來保持本教程的簡單性。

更改副本

您可以打開包含副本的每個單獨模塊,並使用內容框更改副本。 簡單的!

編輯文本模塊

更改圖像

同樣,如果需要/想要,您可以更改正在使用的所有圖像。 確保在上傳之前優化圖像,以避免加載速度緩慢。

編輯圖像模塊

保存並發布

將所需的更改應用到頁面後,您可以保存並發布!

發布Divi頁面

第10步:創建附加頁面

根據您網站的結構,您可以對所需的每個頁面重複上述步驟。 如果您想盡快讓您的網站上線,您可以考慮先使用單頁程序,然後慢慢構建其餘頁面。

第 11 步:創建網站的導航

在您的網站上擁有頁面固然很棒,但如果人們無法訪問他們想要的頁面,我們就會遇到問題。 這就是為什麼您應該特別注意網站的導航。 導航通常位於網站的頁眉和頁腳區域。 WordPress 有一個專門的位置可以從現有頁面動態創建菜單。

選擇主頁

在創建菜單之前,我們先設置一個主頁。 如果人們輸入您的主網址,他們就會登陸此頁面。 默認情況下,WordPress 網站上的主頁設置為您的最新帖子。 要修改此設置,您可以導航到 WordPress 儀表板,然後將鼠標懸停在左側菜單中的“設置” ,然後單擊“閱讀”繼續。

WordPress 閱讀設置

到達那里後,選擇第一個選項下的靜態頁面,然後瀏覽您的頁面以找到您的主頁。 請務必保存更改。

設置主頁

創建主菜單

接下來,我們將創建一個主菜單。 導航到 WordPress 儀表板,將鼠標懸停在左側邊欄中的“外觀”菜單項上,然後選擇“菜單”

單擊添加新菜單並為您的菜單命名。

創建新菜單

繼續添加您想要在導航中的頁面。

將頁面添加到菜單

完成後,將您的菜單設置為Primary Menu

主菜單

並保存您的菜單。 該主菜單現在將自動反映在您網站的標題上。

保存菜單

第 12 步:需要考慮的其他事項

網站永遠不會真正完成。 您總會有需要改進或更新的東西。 如果您想進一步調整您的網站,您可能需要考慮以下一些項目。

創建頁眉和頁腳

在 Divi 網站上創建頁眉和頁腳的方法有多種。 您可以使用“外觀”>“定制器”下的 WordPress 主題定制器來設置 Divi 的默認頁眉和頁腳的樣式,或使用主題生成器來創建它們。 我們強烈建議使用 Divi 的主題生成器,因為它允許您使用拖放可視化生成器創建自定義頁眉和頁腳。 要訪問主題生成器,請導航至Divi > 主題生成器

Divi 主題生成器

單擊“添加全局標頭”以添加標頭。

添加全局標頭

您可以使用 Div 的 Visual Builder 創建任何您想要的標題佈局。

創建模板

Divi 是終極全站編輯主題。 除了創建頁眉和頁腳之外,您還可以為帖子、產品、類別等創建佈局。 Divi 的主題生成器為您提供了最終的自由,可以使用您的創造力或在我們的博客上應用我們預先設計的帖子佈局之一來創建您想要的網站。

優化您的搜索引擎優化

WordPress 已經對 SEO 友好,但使用 SEO 插件和良好的 SEO 工具將提高您的知名度。 了解關鍵字研究、撰寫良好的 SEO 文案以及利用內部鏈接。 通過採取這些步驟,您很快就會成為 SEO 專家。

針對移動設備進行優化

在所有設備上創建一個具有視覺吸引力的網站至關重要。 谷歌的移動優先算法優先考慮小屏幕友好的網站。 值得慶幸的是,Divi 專注於移動優先設計,為您提供了相當大的優勢。

第 13 步:維護您的網站

要擁有一個成功的網站,您必須不斷維護它。

定期更新

即使只是為了安全措施,定期更新您的網站也有好處。 確保在進行更新時使用暫存站點。 這將幫助您避免在更新 WordPress、主題或插件時發生衝突。

測量數據

考慮通過 Google Analytics 等工具來衡量您的網站帶來的數據。 這將幫助您跟踪網站的有效性,具體取決於您為網站設定的目標。

最後的想法

這就是這篇關於如何製作網站的文章! 就像生活中的所有事情一樣,練習越多,事情就會變得越容易。 讓自己嘗試網站創建過程的不同部分,因為這通常是您學到最多的方式。 如果您有任何疑問或建議,歡迎在下方評論區留言!

精選圖片來自 Darko 1981 / Shutterstock.com