如何從頭開始創建網站：初學者指南(WordPress怎麼為開發設置atom環境)

如何從頭開始創建網站：初學者指南

如果你沒有網站，則不存在。這就是今天由互聯網統治的世界狀況。如果你沒有網站，客戶應該如何找到你？聘請Web開發人員為你構建網站可能會變得非常昂貴。學會為自己做這可能是一個更好的主意。在本教程中，我們將告訴你如何從頭開始創建網站。

網站建設方法

如果你不知道如何從頭開始創建網站，整個主題可能看起來很難。託管，域名，編碼等這一切都非常令人困惑。

但創造出以前沒有任何東西的東西的滿足感就像世界上沒有別的東西一樣。在了解如何從頭開始創建網站時，你將學到的東西將在你的整個生命中為你提供良好的服務。

誰知道，你可能喜歡建立網站，以至於你決定改變職業。你是否聽說過世界上的Web開發人員嚴重短缺？

如何從頭開始創建網站

在本節中，我們將告訴你了解如何從頭開始創建網站所需的一切。有四件事，還有一件要學習的額外項目：

如何購買域名

如何購買託管

如何用HTML編寫

如何在CSS中設置樣式

如何在JavaScript中工作

首先，讓我們定義什麼是簡單的網站。出於本教程的目的，它是一個小型網站，宣傳你的工作並提供未來客戶的聯繫方式。它應該回答三個問題：

你是誰？

你是做什麼？

怎麼聯繫你？

一到三頁就足以向訪問者提供所有這些信息。使用HTML和CSS，你不僅可以使網站具有簡單的功能，而且可以使其看起來很好。

如果你需要更多網站，例如提供某種電子商務功能或託管博客，你需要了解有關Web開發的更多信息，包括後端編程語言。「等等，後端是什麼？」你現在可以問我們。

答案是假的 - 複雜的，這意味著它看起來很複雜但實際上很簡單。如果你可以在顯示器上看到它，那就是前端。如果你不能，那就是後端。按鈕，圖像，文字 - 這是前端。你的網站處理專業Lego Darth Vader時鐘的訂單的方式？那是後端。

要對網站的後端進行編碼，你需要學習其他編碼語言，如JavaScript。我們不建議你自己嘗試。如果直接涉及金錢，就像網上商店一樣，最好讓經驗豐富的專業人士為你處理。

然而，一個簡單的網站是另一回事。你可以自己做。

話雖如此，讓我們深入探討如何從頭開始創建網站。

我如何購買域名？

在我們告訴你如何購買域名之前，了解域名是一個好主意。

就像你在現實世界中有一個地址一樣，你的網站也必須在互聯網上有一個地址。域名是你的地址。

好的，你如何註冊域名？首先，你需要考慮一些可能代表你是誰以及你做什麼的可能性。如果你要創建一個個人網站來宣傳自己，你應該考慮將其命名為和你想做網站相關的域名。如果你的名字很難，你可能必須要有創意。請記住xxx.com網站地址被認為是許多行業中最受尊重的地址。儘可能嘗試獲得一個。

不要忘記這個名字應該與你做什麼和你是誰有關。

當你選擇某些域名選項時，你必須使用域可用性檢查器檢查哪些域名可用。一旦確定了所需的名稱，就必須購買所需域名的權利。通常，你選擇的託管服務提供商將允許你購買域名作為託管設置過程的一部分。

我如何找到主機？

有數百家網路託管服務提供商，提供世界各地的服務。選擇一個可能是一個困難的決定。以下是最受歡迎的列表，供你查看，研究和決定：

Hostinger

BlueHost的

SiteGround

HostGator的

的iPage

A2Hosting

MDDHosting

FastComet

無論你選擇哪個網站，都應該有很多關於如何使用他們的平台從頭開始網站的指南。如果他們不這樣做，請避免使用它。

一旦你擁有託管解決方案和域名，就可以開始開發你的網站了。

什麼是HTML？

HTML（或超文本標記語言）不是一種編程語言，儘管許多人似乎都在想。HTML負責使你網站的元素髮揮作用。它就像你構建網站的腳手架，以及掌握學習如何從頭開始創建網站的基本工具。

HTML告訴你的網站頁面上應該有哪些文本，圖像應該在哪裡，如果有的話，鏈接應該重定向用戶。

要查看網站上的HTML內容，在搜索引擎網路瀏覽器中打開網站，右鍵單擊頁面上的任意位置，然後點擊查看頁面來源。如果它在最頂部說，你正在查看網站的HTML代碼。不過，BDG是一個複雜的網站。它使用像JavaScript這樣的東西來使它工作。

不要氣餒，你的網站將比BitDegree簡單，你不需要3000多行代碼就能讓它按照你的意願運行。

好的，你已經了解了HTML是什麼，現在是時候學習如何使用HTML從頭開始創建網站了。

Internet上有數百種HTML課程，指南和教程。我們編寫了一個關於如何學習HTML的教程在BitDegree上快速。本教程將告訴你需要了解的所有內容，以便快速入門並快速獲取HTML。

此外，我們有一個很棒的互動式HTML和CSS課程，使用遊戲化原則來確保你學習並同時保持自己的娛樂。

什麼是CSS？

我們之前提到過CSS，但並沒有真正告訴你它是什麼。是時候解決這個問題了，因為這是學習如何從頭開始創建網站的重要一步。

我們已經確定HTML用於「告訴互聯網」文本和其他網站元素應該在哪裡以及它們應該做什麼。CSS或層疊樣式表是一種語言，它告訴網站所有不同的元素應該如何看。雖然它確實為你的網站元素設計了風格，但它不是一種編程語言。

使用HTML，你可以使你的網站有一個簡單的文本行，說「我正在學習如何從頭開始創建一個網站。」該文本將非常簡單明了。

使用CSS，你將能夠在頁面上更改此文本的字體，大小，顏色，對齊方式和位置，以及許多其他內容。

對於更複雜的網站，你的選擇實際上僅受你的想像力和HTML和CSS知識的限制。至少在談到網站的外觀時。對於功能，你至少應該學習JavaScript的基礎知識。

什麼是JavaScript？

HTML和CSS是只告訴你的瀏覽器如何生成頁面的語言，JavaScript是一種真正的編程語言。每個前端開發人員都必須了解它。

你為什麼需要JavaScript？假設你正在創建一個個人網站。它有三個部分，HOME，GRAPHIC DESIGN PORTFOLIO和CONTACT ME。你可以使用HTML插入將用戶引導到頂部不同部分的鏈接，然後將此鏈接設置為帶有CSS的可按下按鈕。

對於一個基本的網站，沒關係。但是，如果你想獲得它並添加一些動畫怎麼辦？使用簡單的JavaScript，你可以做一些非常酷的東西。

如果你真的想知道如何從頭開始創建一個真正的網站，你需要知道這三個：腳手架的HTML，樣式的CSS和功能的JavaScript。

網站建設軟體

好吧，假設你了解了使用HTML，CSS和JavaScript構建夢想網站需要做些什麼。你知道如何定義所需的元素，它們的外觀以及它們的作用。

這不會讓你的網站神奇地出現在任何地方。你需要在.html，.css和.jscript文件中編寫代碼，並通過託管服務提供商將其上傳到你的網站。

但是，如果你知道如何從頭開始創建網站，那麼你需要實際創建哪些工具？

集成開發環境

IDE或集成開發環境是專門的軟體，包含構建網站或獨立應用程序所需的一切。

雖然WebStorm，Visual Studio Code或Adobe Dreamweaver等最好的IDE具有數百種出色的功能，包括你網站的實時預覽，但事實是你可能不需要它們用於你的項目。

除非你真正的目的是學習如何從頭開始大規模創建網站，否則購買用於Web開發的IDE是完全矯枉過正的。相反，你應該得到一個增強的文本編輯器。

增強的文本編輯器

你需要一個專門的免費（開源）文本編輯器來學習如何從頭開始創建一個網站，然後去做它以使你的業務在互聯網上。

有多種可供選擇的工具可供選擇。你可能需要查看Atom，Notepad ++，Vim或Brackets。

整個過程如何運作？這很簡單。你創建一個新文檔，以適合HTML的方式構建它，並使用擴展名.html保存它，例如index.html。

然後，鏈接.css文件以控制HTML腳手架中的元素外觀。這就是製作簡單網頁所需的全部內容。

「好的，」你現在可能會問。「這只是文字，我怎麼知道我的網頁在互聯網上會是什麼樣子？」

很簡單。你只需使用任何Internet瀏覽器打開HTML文件即可。

使用你選擇的文本編輯器和Web瀏覽器，你可以更改和整形頁面，直到你滿意為止。那時，通過你的託管服務提供商上傳文件，網站很快就會上線。

自動化工具

雖然你正在考慮如何從頭開始創建網站，但可能存在問題。你可以建立一個簡單的網站，讓人們知道你是誰，你做什麼以及如何與你聯繫。

但是如果你決定添加博客會發生什麼？

是的，你將能夠添加一個blog。html並將其與網站的其餘部分鏈接起來，但如果沒有某種後端解決方案，發布新帖子將會非常煩人，這使得添加新內容變得更加容易。

有更簡單的方法來做到這一點！

WordPress建站

大多數互聯網都建立在WordPress上是有原因的。它是一個內容管理系統，具有豐富的模板和插件庫。如果你需要你的網站做某事，可能會有一個WordPress插件。

使用WordPress設置你的網站比自己編寫網站容易100倍。所有頂級網站託管服務提供商都有工具在WordPress上自動設置你的網站。完成後，你可以登錄wordpress，然後可以更改主題，添加插件，以及添加所需的內容（圖像，文本，視頻）。

如果你嘗試從頭開始學習如何創建網站並放棄使用WordPress，那麼你的知識將不會浪費。畢竟，你可以使用你學到的CSS技巧，自己製作一個WordPress主題並自己定製。

網站構建服務

你絕對可以學習如何從頭開始創建一個網站，但有些人在幾年前就已經學會了。這些人製作的網站允許你拖放元素來創建自己的網站。

一個網站內的網站，有多少？

像這樣的網站建設者在YouTube上大肆宣傳，很可能你至少聽說過它們。如果你還沒有他們是一個短的谷歌搜索。在大多數情況下，這些工具是一個快速無憂的方式來製作一個非常簡單的網站。

請記住，最新的網站趨勢往往嚴重依賴圖像。你可能需要大量高質量，專業拍攝的照片。專業提示：通過kraken.io網站上的工具運行這些圖像。它可以使圖像文件更小，而不會顯著損害質量，這將使你的網站載入速度更快。

快速載入時間對於用戶體驗非常重要。常見的邏輯是，網站載入速度越快，訪問者留下和瀏覽的可能性就越大。

結論

如何在TL; DR版本中從頭開始創建網站？它可以簡單或複雜。取決於你選擇的方法。如果你決定學習編碼，那麼它將會很複雜，但最終會有所回報。

另一方面，使用眾多可用的網站構建器之一將使該過程更容易。

如果你想要挑戰，請先開始學習HTML和CSS。不要購買域名或託管，只需用瀏覽器打開HTML和CSS文件即可。使用你喜歡的增強文本編輯器編寫你的網站。

一旦你知道如何製作HTML和CSS魔法，就可以學習JavaScript的基礎知識，通過時髦的過渡和你可能需要的任何功能來修飾你的網站。

當你擁有所需的內容時，請開始製作你需要的網站文件。一旦你擁有了你想要的頁面，請繼續，購買域名和託管。提供者（至少是好的）將提供有關在線獲取所有內容的教程。

WordPress怎麼為開發設置atom環境

WordPress真是一個很奇葩的項目，它的很多編碼標準和PSR2是那麼的不同，例如一般的php項目都要求以空格代替TAB鍵，但唯獨WordPress要求必須用TAB鍵本身來作縮進，等等。以至於必須專門為它的開發而設置一套atom環境。

在atom中查找並安裝project-manager插件，有了它，我們才能單獨為WordPress項目創建自己特殊的環境。

按照說明文檔，在菜單里選擇Save Project後，它會創建一個~/.atom/projects.cson文件，裡面有你的項目的路徑等基本信息。

在你的項目的根目錄下，建立一個文件名為project.cson的文件，內容如下：

第3行的意思是說：只對本項目進行WordPress校驗。

第4行和第5行的意思是說：只對php文件進行硬TAB。

這樣，你的其它所有PHP項目還是用PSR2標準進行校驗，並且是軟TAB，也就是TAB會被轉換為空格，而只有這個項目里的PHP項目是硬TAB，其它文件例如JS等還是軟TAB。

關於Wordpress編碼標準的安裝，請參考上一篇文章：https://segmentfault.com/a/11...

新方法

Atom中的Project Management並不好用，最後我還是採用了editorconfig加phpcs的方法進行設定：

editorconfig

首先，在項目的根目錄下建立一個.editorconfig文件：

這裡規定了php文件的縮進方式必須用TAB鍵。注意：Atom必須把縮進方式改成Auto，否則在editorconfig里的設置會不起作用。

phpcs.xml

然後，在項目根目錄下建立一個phpcs.xml文件：

在這裡，我們告訴phpcs，這個項目將使用WordPress驗證。

以上就是如何為WordPress開發設置atom環境的詳細內容，更多請關注網站的其它相關文章！