建站的主要流程？

01-04

前陣子小夥伴折騰創業，我憑著學了點HTML、CSS、js、python就自覺跑去裝x說可以幫忙建站。接下來就是各種打臉的情況鋪天蓋地向我飛來。。。
網頁的代碼已經碼的差不多，設計啥的都沒啥大問題。
由於小夥伴的創業團隊里沒有技術工，建站這一塊就理所當然都變成我的活兒。。。但是我只會前端這一部分（而且也是三腳貓功夫），所以我就傻眼了。
前情提要交代清楚，此處就是詳細的問題說明：

我目前對建站了解的是這樣的：
前端：UI設計、html（框架）、css（潤色）、js（層）。也可以使用python等（交互）。
後端：買域名。（租用伺服器。管理伺服器。）
- 不知道這樣的是不是全部的流程？還有那些需要補充的？
- 並且從買域名這裡開始都分別需要使用那些語言（我知道有些部分可以使用不同的語言，那麼這些語言之間的優缺點是什麼？）
- 小夥伴希望網站能夠有在線提交申請表格之類的功能，所以是不是就需要編寫伺服器+管理資料庫？
前面那些會一點點的語言都是平時自己學著玩兒的，沒有認真系統學習過軟體編程這些（本來讀書時想math、computer science double major的，後來cs放棄治療了-。-）。像c，c#，c++這些還傻傻分不清楚。。。請各位專業人士輕輕吐槽。。。

非常感謝！ :3

《只需要搞清楚以下幾個步驟，你就能輕輕鬆鬆學會建站》

不知道你的基礎如何？也不知道你對建站要求有多高？帶著這些問題，歡迎往下接著看。或許對你幫助很大，當然也許幫助沒有想像那麼大。

下面，本人王晴兒結合自己從業網頁設計製作這6年以來的經驗談一下，網站建設流程的一般流程是怎麼樣的？

1. 網站域名和空間

一個網站的建設首先要有一個好的域名，我們常見的網站後綴一般都是選擇.com和.cn的較多，.com是國際域名後綴，.cn是中國的域名，域名的主體一般和你的網站主題，或者企業的名稱全拼來做域名的主體，域名空間。網站空間是用來存放您的網站內容和程序文件，比如網頁、圖片、視頻資料等等。

2. 網站設計布局

對於訪問網站的大多數用戶來說，進入網站後給他的第一眼就是網站結構布局。不同類型的網站設計業不一樣，在建站前期我們需要做一個合理的規劃，想好需要實現的功能，想要的板式類型和主要的面對用戶群，但是不管怎麼設計，網站的作用都是為了能直接吸引用戶，讓用戶能更快的了解企業產品及技術。這時候我們要收集好素材，包括網站中需要的內容，文字，圖片等信息。

3. 製作建設

當做好以上內容準備的時候，就可以開始建站了，建站主要分前台和後台。前台是網站的板式，根據網站類型及面向人群來設計網站的版面，版面不宜太過雜亂，一定要簡潔，保證用戶體驗，才能讓訪問者有好感。建設後台就較為複雜了，就要用程序整合前台，並且完成需要的功能，這個需要較為複雜的程序編寫。網站建設歸終於一點就是網站布局，只有合理布局每一個板塊，把最直接最有效的信息展示在用戶面前，而且用戶查找信息也比較快捷方面，用戶獲得的有效信息當然也會更快更多，可以大大提高網站轉化率。

4. 測試發布

當網站程序方面編寫好的時候，就是個一個網站的雛形了，但這時候網站還是不完善的，需要進行測試評估，網站還是有很多不完善的地方，要從用戶體驗的角度多去觀察，漸漸完善。當網站的問題都解決，沒什麼大的問題的時候，就可以把網站傳到虛擬主機空間里，這是訪問域名就可以正式訪問網站了。

5. 維護推廣

在網站上線之後，我們要完善網站的不足，對網站進行推廣宣傳。網站推廣的方法可以歸納為八種，既：搜索引擎推廣方法、電子郵件推廣方法、資源合作推廣方法、信息發布推廣方法、病毒性營銷方法、bbs宣傳方法、網路廣告推廣方法和綜合網站推廣方法。

不知道回答得如何，希望能對您有幫助。

在此，送您一句我很喜歡的雞湯：一直相信，越努力，越幸運，越溝通，越親近。

如果還有哪些網頁設計或建站方面的問題，可以來我的個人博客http://www.yemiansheji.cn/做客與交流！

當然了，您覺得文章有價值、或關注收藏感謝什麼的，也順手點個贊哈——以文章價值為橋樑，「點贊」：使「您的價值」得以延伸並持續留香……

一個用心做出的網站不是一個人單槍匹馬就可以搞定的，但是如果只是想做一個簡單的功能站或者展示站，流程大概如下。

購買伺服器空間；

伺服器環境搭建，此處需要根據不同的技術方案選擇不同的環境，例如選擇使用apache還是nginx，是選用mysql還是orcal，都是要根據情況而定的，但是我看到這裡問題有PHP標籤，所以我以典型的php的LAMP開發環境為例。

購買配置域名；

前端頁面設計（即網站長什麼樣子）；

前端頁面靜態頁面完成（你提到的HTML/CSS/JS會在這一步完成）；

資料庫設計（用來存儲網站的數據）；

後端代碼完成（從數據取數據、邏輯運算處理、功能實現）；

測試；

上線；

但是建站絕對不是只有這些這麼簡單的東西，具體到細節其實還是有很多要考慮的。

比如為了節省開發時間，可以使用cms建站，比如dede、phpcms…………那麼選擇哪一種？

為了便於維護，可以使用開源的框架，比如yii、smartfony……那麼選擇哪一種？

就算是自己造輪子，也要考慮到後期維護和需求變更。

考慮到上面提到的創業，老實說互聯網創業你們現在的技術水平視線太薄弱了，推薦小白鼠入門建站工具dedecms，只要按照文檔，自己能寫出前端頁面，就能夠實現網站的功能。

還是回答一下吧。

其實這個不難，樓主已經有了一定的基礎了就好辦多了。

簡單的網站建設沒多少步，這裡排除掉一些大型的、伺服器部署型的網站。

面向一般的中小企業展示型、個人博客性、論壇型、信息型的網站。

我們完全不用閉門造車，自己再畫網站結構圖，再去憑著代碼基本功硬去編寫一個網站。

這時候，我們可以利用一些開源程序：

例如：dedecms、帝國cms、phpwind論壇、discuz論壇、wordpress、zblog我的博客就是這個開源程序、等等其他一些開源程序。

那麼這個就節省了我們很大一個工作量和工程量。

一般，我們所選用的語言程序和資料庫多為：一般php+mysql或者asp.net+sqlserver

那麼接下來：

租伺服器：

把你的網站整站程序打包上傳到你的伺服器上面，

解壓你的網站程序，

開通你的資料庫伺服器，

安裝你的網站，

這個時候，網站的基本結構就安裝出來了，你可以依據自己學習的一些前端技術，html+css等等，還有圖片切圖，去修改和完善網站前台內容了。

如果不會，網上下載一個對應的模板或者主體套上去稍微修改一下就可以了。

看，多簡單的一個網站就出來了。

其實，剛開始建設網站的時候不在於程序和語言多牛逼，程序和語言可以在後期慢慢的逐步提升，後期都是可以進行升級的。

我們所做的是給用戶提供精緻、精品的內容服務。

比如：利用wordpress建站的網站不計其數，大型網站也是非常多的。

再比如用discuz建站的也是不機器數，大型網站也有非常多的。

例如：落伍者、站長之家、百度站長工具論壇、百姓網新出的問答平台、月光博客、等等很多知名網站都是用的開源程序搭建，後期結合實際情況需求，再行開發。

他們最終靠著優秀的內容聚集了一大批的用戶。

在大量的用戶基礎之上，他們提升了網站程序的語言，優化了資料庫，完善了伺服器的架構。

當然：想做大型站的、單獨開發網站的小夥伴不要被我誤導了，

畢竟原始開發大型網站，還是一個蘿蔔一個坑。

前端有前端、美工有美工、程序有程序、架構有架構。

實際情況不同，必然具體問題對待解決也不同，不可千篇一律。

終於不是只差一個程序員了，而是只差一個技術員。。。

我就是自己做了一個網站（建築一網 http://www.jianzhu1.com），七月1號做好的，現在上線大概20天吧。現在每天大概有400人訪問吧，閱讀量在1000左右，真的很低呢，新站都是這樣吧。

圖1：網站logo 和我的更新記錄

圖2：網站現在的完成圖

做網站很難嗎？我一開始也是這麼認為的，可是經過一段時間摸索之後，我覺得做網站還是可以入手的，關鍵是這個過程很有趣。

下面我們就一步一步分解做網站這個過程吧。本次回答的前四點可能和其他回答都差不多，重點看本回答的第五點吧。這是我自己整理的結果（比較長）。

一、首先你需要一個域名和一個空間。

域名我是在Namesilo上買的，空間是騰訊雲的，這些前面的回答都有了，我就不一一說了。

圖3：我是在這個網站上買域名

騰訊雲目前運行的還不錯，而且後期還支持QQ登陸的介面，還是很適合我這個網站的。

二、其次，你需要去安裝運行環境Nginx

這個，老實說我也是折騰了好多次，好痛苦啊！之間伺服器都格式化了好幾次，有一點不滿意我就刪掉重來，終於摸索了我自己的路。

我這裡是按照oneinstack的方法去安裝的，安裝他們官網的安裝步驟（安裝 - OneinStack）去做就沒有問題。安裝好的截圖如下圖所示。

圖4：安裝oneinstack成功提示

三、你需要一個FTP軟體

這裡我隆重推薦WinSCP軟體，真的是我用過最好的FTP軟體了，還有Linux的操作介面（下圖紅色箭頭）。

圖5：WinSCP軟體界面

四、你需要安裝WordPress，並選好主題

然後我的做法就是把WordPress下載下來，通過FTP直接拖動到空間裡面，這樣WordPress就安裝好了。然後設置一下用戶名和密碼就可以了。

主題主要是根據你網站的用途來定，企業網站、個人網站、BBS論壇所用的主題是不同的。

五、個人有用的小經驗（特別好用）

（WordPress使用經驗總結（微信機器人+B站視頻+美化文章內標題的標籤）-建築一網--施工、材料、設計一體化）

Simple Tags 插件實現網頁內鏈（修改支持中文）

騰訊雲CDN緩存設置經驗-建築一網--施工、材料、設計一體化

如何上傳sitemap.xml文件-建築一網--施工、材料、設計一體化

WordPress在側邊欄插入圖片技巧-建築一網--施工、材料、設計一體化

使用騰訊雲cdn之後的速度測試--基本滿意-建築一網--施工、材料、設計一體化

階段性總結--WordPress最近的折騰-建築一網--施工、材料、設計一體化

下面挑幾個有代表性的經驗放在下面分享給大家。

5.1、自由連接網站和微信公眾號

眾所周知，微信公眾號裡面功能最弱的就是沒有認證的個人訂閱號了。不是我不想認證，是微信現在關閉了個人的認證了。這就導致微信公眾號的很多開發功能無法使用到。比如這次，我想用水煮魚大神的微信機器人插件來讓我的網站和公眾號可以自由連接，就必須要使用一點「巧勁」了。

首先大家一開始都以為，未認證的公眾號，在微信公眾平台在微信自己的後台提供了自定義菜單設置的功能，但是沒有開放創建菜單的介面。所以這個就是2選1的問題：

1. 所有的操作都在微信後台進行設置。 2. 為了使用使用微信機器人的自定義回復的功能，放棄自定義菜單功能。

魚和熊掌是不可兼得的。

可是事實上，沒有認證的個人訂閱號，是可以做菜單的。可以在我的公眾號「建築一網」上看一下效果。

http://weixin.qq.com/r/0z9QSIjEVdUqrcwr92rB (二維碼自動識別)

具體做法：

不需要在微信機器人做，而是在公眾號里做。

1.先在「開發-基本配置」里，把配置停用。

2.在自定義菜單里配置菜單。

3.然後「開發-基本配置」里，把配置啟用。這時候配置的菜單就失效了，不過沒關係。

4.點「添加功能插件」，添加「自定義菜單」，點擊啟用。

注意：以上四步設置完成之後，需要把WordPress伺服器重啟一下，不然微信機器人會沒有響應。Nginx下面重啟伺服器的命令是：

service nginx restart

下面，我將用視頻演示一下操作過程：（可能移動端無法看這個視頻，大家可以去B站關注我的賬號「建築一網」來觀看。）

如何讓沒有認證的個人訂閱號可以自由連接網站和微信公眾號_機械_科技_bilibili_嗶哩嗶哩

bilibili.com視頻

本視頻重點：如何讓沒有認證的個人訂閱號可以自由連接網站和微信公眾號？

第一步、先在「開發-基本配置」里，把配置停用。

第二步、在自定義菜單里配置菜單。

第三步、然後「開發-基本配置」里，把配置啟用。這時候配置的菜單就失效了，不過沒關係。

第四步、點「添加功能插件」，添加「自定義菜單」，點擊啟用。

然後，我們來試一試。我這裡可以正常使用了，是因為我之前重啟過WordPress伺服器了。如果不能使用的話，可以到後台WordPress來重啟伺服器。

操作步驟如下：

第一步、打開WinSCP軟體。

第二步、登陸，並進入Linux系統。

第三步、輸入重啟命令 service nginx restart

這樣就么有問題了。

建築一網微信公眾號主要有兩大作用，第一是分享建築結構相關知識，第二利用該微信公眾號查詢「建築一網」博客中的文章。

查詢功能說明：

相關查詢指令：

輸入n返回最新日誌

輸入R返回隨機日誌

輸入t返回最熱日誌

輸入C返回最多評論日誌

輸入t7返回一周內最熱日誌

輸入C7返回一周內最多評論日誌

輸入h獲取幫助信息！

輸入「關鍵詞」查詢建築一網的相關文章。

查詢步驟如下：

在搜索中搜索不到需要的內容，請更換關鍵詞重新搜索，搜索只能搜索博客（http://www.jianzhu1.com）中的內容，網站中會根據網友提出的問題進行更新相關的內容，如果你有什麼問題，請給我們留言，我們會在微信公眾號和網站中進行相關更新。

在現在信息量巨大的時代里，相信你關注了很多不同的微信公眾號，那麼如何快速找到建築一網呢，你可以使用微信公共賬號置頂功能，如下所示：

5.2、在wordpress中引用B站視頻

在wordpress中引用B站視頻如果直接用官方的分享代碼經常會出錯，視頻經常會顯示找不到，所以小編給大家一個方法就是用下面這個代碼，每次只要替換代碼中小編標識的粗體數字那邊就可以！

如：http://www.bilibili.com/video/av4277134/

數字就是B站視頻地址中av後面的數字

&&

5.3、如何美化文章內標題的標籤

就是實現圖示功能

其實是通過CSS定義了內容中的H標籤的樣式，直接將下面的代碼添加到你的style.css中即可：（h1、h2、h3分別是一號標題、二號標題和三號標題）

.article-content h1{ font-size:26px; color: #FF0000; font-weight:bold; border-bottom: 1px solid; padding: 5px 15px; border-left: 8px solid; margin:18px 0px 18px -20px; overflow: hidden; }

.article-content h2{ font-size:18px; color: #FF0000; font-weight:bold; border-bottom: 1px solid; padding: 5px 15px; border-left: 8px solid; margin:18px 0px 18px -20px; overflow: hidden; }

.article-content h3{ font-size:12px; color: #FF0000; font-weight:bold; border-bottom: 1px solid; padding: 5px 15px; border-left: 8px solid; margin:18px 0px 18px -20px; overflow: hidden; }