轉自：

http://blog.sina.com.cn/s/blog_7e050dc80102w312.html

本文記錄了一個類博客網站從無到有的搭建過程，同時也是我入門django以及再次入門前端的過程。在建站過程中借鑒的博客、文檔、視頻等資料一并列出，希望能幫助到有需要的同學。 一直以來都有搭建個人網站的想法，目的有二：一是通過這個過程學習建站的知識，二來希望能像其他的技術大神們一樣有個(xuan)優(ku)雅(bi)簡(ge)潔(gao)的博客。之前暑假在實習的時候用wordpress在阿里云的云虛機主機上搭了個博客，由于web知識太久沒接觸，當時對html、php等知識可以說是兩眼一抹黑。幸好wordpress的部署非常簡單，跟著教程一路點點點就ok。然后再找了個看起來不那么low的模板往上一套，博客就算完成了。本來這事兒就算搞定了，個人博客什么的可以在互聯網的角落里落灰了。直到有一天我突然想做一個爬蟲的時候，發現這個云虛機主機上只能跑特定的程序，不能當一臺真正的服務器用（免費的果然坑爹）。正巧在這個時候，知道了阿里云在搞云服務器的活動，針對學生只要9.9一個月。9.9就能暢享1G內存20G硬盤百M帶寬的公網服務器， 簡直業界良心。于是怒下單豪租一年，但是直到12月一次也登陸過... 復習PAT的日子可以說是寫bug和debug的毅種循環。就這樣過了一個月，12月初考完PAT之后終于有整塊兒的時間進行網站的開發。這個時候的我已經手握強大但吃灰數月的阿里云服務器，自然已經看不上那半殘的云主機。于是就開始了自己建站之路。 由于我有一定的html基礎，所以學習順序是Django（實現業務邏輯）--->Bootstrap（美化前端頁面）-->Js（實現前端特定功能）-->HTML/CSS（系統地學習一遍）。這個過程同時也是我建站的過程。 零、網站是怎么煉成的 網站分為前端和后端兩部分，后端負責選擇呈現的內容和接收數據，前端負責展示內存和獲取數據。對于最基本的靜態頁面（HTML文件），當你輸入了一個網址敲下回車之后，目標服務器就會收到一個http請求（一般是GET），然后后端程序（Http服務器軟件）就負責把相應的頁面傳送到瀏覽器，對于瀏覽器來說就是下載相應的頁面（HTML文件），然后瀏覽器解析html文件并呈現出來，就完成了一個最簡單的網頁瀏覽過程。 所以一個網站能夠被訪問需要的最基本元素有：一臺服務器（公網服務器或者PC），一個Http服務器軟件程序（Apache/IIS等）,一個網頁（HTML文件）。 為了能讓HTML文件有統一的風格和漂亮的樣式（比如字體的大小、按鈕的顏色等），我們引入了CSS。 為了能在HTML上動態的實現一些功能（彈窗、改變頁面文字等），我們引入了javascript（和Java并沒有關系）。 為了能重復應用特定的html頁面（模板），提高網站開發和顯示效率。我們引入了動態頁面，使用PHP、python、Java等語言。 至此，簡單的服務器軟件 具體可以參考我轉載的文章：[ZT]從輸入網址到顯示網頁的全過程分析 一、初學Django 隨著技術的發展，現在早已不是當年那個html靠手寫超鏈接靠粘貼的蠻荒時代。由于各種框架的出現，現在的web建設已經從造輪子變成了搭積木。框架說白了就是把各種最基本的零件組裝成一個半成品，在上面稍加修改就可以完成可用但初級的產品。當然對于各種高流量大并發的高端網站，現成框架還是遠遠不夠的。 由于我是看書苦手，所以在一開始就沒有找來長篇的文檔資料硬啃，而是選擇了看視頻入門。現在網上有很多mooc網站，選擇面很廣。我之前一直在網易云課堂看視頻，所以這次就直接找來了潘炳臣老師講的《Python Django 快速Web應用開發入門》學習。不得不說潘老師的聲音很好聽，我這個看一會兒視頻就想關了刷論壇的人竟然一個不落全都看完了，當然他講的內容對于初學者也是很不錯的，每節課知識點不多而且都有總結回顧，節奏把握的很好。 但是這畢竟是個入門視頻，對于搭建一個網站來說還是不夠的。于是我又在網上找到了一些django網站開發的博客，跟著他們的步驟一步一步的搭起了簡單的架子。我使用的是當時django最新的1.9版本，基于python3。django同時也提供支持python2的版本。理解了MVT模型、orm模型、模板之后搭建過程就比較簡單了，我用的還是django自帶的sqlite數據庫，連設置數據庫的步驟都免了。過程中遇到的一些問題，基本上都能通過百度和谷歌快速的找到答案。 分享一個debug的方法，django默認是打開debug模式的，所以如果模板或者數據庫讀寫有任何錯誤，都會在錯誤頁面寫出來，仔細閱讀錯誤描述或者搜索錯誤描述一般就能找到解決方案。 django學習資料： 菜鳥教程（各種互聯網相關內容都有） django（普通讀音：姜go，文藝讀音：詹go，我的腦內讀音：大家go）的百度百科 潘炳臣-Python Django 快速Web應用開發入門 Tango with Django 中文文檔 The Django Book 2.0 Django 基礎教程 Django框架學習-Forms篇 django練習——博客系統優化 二、給架子披上外衣——Bootstrap 實現了基本的博客展示和評論功能之后，我就開始著手美化前端頁面，使用了現在很流行的前端框架Bootstrap。前端框架可以理解為一個前端語言搭建的半成品庫，用這個半成品庫可以輕松的搭建簡潔美觀的web頁面。Bootstrap把很多常用控件的樣式都已經寫好，比如button的按鈕標簽，它的顏色、大小、邊距、點按的效果等都已經設置好，很方便的就能使用。 由于博客的展示用不到像大圖輪播等炫酷的效果，所以對于bootstrap我只學習了能用到的部分。先是看了一部分網易云課堂李炎恢老師的Bootstrap視頻教程，跟著教程和博客一點一點的優化了主頁和展示頁，后來又到寧皓網看了幾集免費視頻，優化了搜索框。所以對于有HTML基礎的同學，我推薦的學習方法就是需要用什么就查文檔，直接使用即可，不必系統的學習完之后再用。 Bootstrap在網上的資料非常多，需要注意的地方就是導入bootstrap的js文件的時候一定放在jquery后面，由于后續會有其他jquery插件也使用jquery庫，所以jquery庫可以放在模板文件的開頭導入，只把bootstrap放在最后。 關于Bootstrap樣式的自定義，這個其實很簡單，只需要在HTML中插入自定義的CSS文件，就會覆蓋bootstrap默認的樣式。不建議在bootstrap源文件中修改樣式。 Bootstrap學習資料： 李炎恢-Bootstrap視頻教程 寧皓網（講的不錯，網上有免費的課程資源） bootstrap的百度百科 bootstrap3中文文檔 twitter bootstrap中文版 bootstrap菜鳥教程 三、JavaScript/jQuery及強大的插件 當前端的頁面做的有點模樣之后，還有一些驗證和細節功能沒有實現，同時我也展開了天(nao)馬(dong)行(da)空(kai)的想象，想實現一些炫酷的功能。于是我的眼光轉到了可以賦予html“魔性”的JavaScript。 JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。 由于Javascript博大精深，先系統的學一遍再用的話黃花菜都涼了。所以我就本著王婆賣瓜現學現賣的精神，直接搜索能實現各種功能的代碼。由于網上大神很多，我的需求又十分普遍，所以大多能找到已經寫好并且封裝的插件，基本上拿來就能用。 在導入各種插件的時候需要注意的地方就是很多插件依賴jquery庫，所以要在jquery庫之后導入。如果繼承模板使用插件，可以在繼承的子模板中導入插件，也可以在父模板統一導入，在子模板加上{% load staticfiles %}。還有就是一定確認一個插件/庫對于一個HTML頁面只有一次導入，如果重復導入可能造成意想不到的問題。 由于js代碼是由瀏覽器運行的，所以可以用瀏覽器來調試js代碼。Safari、Chrome和Firefox都有開發者工具，只需打開開發者工具的console（控制臺）標簽即可看到js加載的信息，如果有語法錯誤就會在這里顯示出來。 學習資料： JavaScript 教程 Jquery教程 用到的庫： js-highlight庫，可以控制頁面元素高亮，用于搜索結果關鍵詞高亮 bootstrapvalidator，簡單好用的表單驗證的插件 scrollup，生成返回頁首按鈕的插件 lightbox2?，實現圖片預覽的燈箱插件 四、HTML5/CSS3 HTML本質上是一種格式控制語言。隨著前端語言不斷的發展，在引入了CSS之后，html和css的分工就比較明確了。既html負責定義內容（是什么），css負責控制內容樣式（怎么展現）。html和css上手比較容易，在熟悉基本的標簽和原理之后，其實完全可以邊做邊學。在本次建站過程中，前端基本上都是一邊搜索一邊參考w3school然后再實現的。網站上線之后我又找來了網易云課堂翁愷老師的html和css教程看了一遍，以期系統的學習前端語言。然而，通過和李剛老師的《瘋狂HTML 5/CSS 3/JavaScript講義》對比之后發現，云課堂上的教程還是講的比較淺顯。后續如果有需要還是要仔細啃書來學。 學習資料： w3school 翁愷-HTML5入門 翁愷-CSS3 五、令人激動的時刻——部署到阿里云 網站在本地測試服務器上基本完美運行，于是我開始向服務器部署。部署的過程參考了自強學堂的這篇部署教程，教程使用的ubuntu系統，所以我也把阿里云服務器的操作系統改為ubuntu14.04版。由于我的osx系統自帶ssh，所以直接使用了ssh來連接阿里云服務器，直接ssh 你的用戶名@服務器的公網地址，然后輸入服務器密碼即可。ssh之后就可以用linux命令來操作服務器。 前面說到網頁的瀏覽過程就是服務器軟件根據瀏覽器請求的地址將存儲在服務器上的頁面傳輸給瀏覽器。部署的過程就是設置apache、pythonweb環境和上傳網站。網站的上傳我使用了osx下的Transmit。 需要注意的是，這篇教程配置sitename.conf（sitename可以換成自己網站的名字）的時候，網站所在位置是/home/tu/blog，所有路徑包括標簽內的路徑都要改成自己的網站路徑。對于第4步修改wsgi.py文件，如果你使用的是python3環境，那么一定要修改第七行，將"blog.settings"替換成你的"工程名字.settings"。原文說可以不修改，我就沒改，然后就各種報400錯誤，我被這個問題困擾了2天，最后修改了就好了T_T. 服務器在大陸的網站必須要備案，具體辦法可以參考萬網的相關資料。辦理備案的時間大約為半個月左右。 資料：Django 部署(Apache) 六、意料之外的問題——iphone的兼容性 上線之后便迫不及待的用手機打開網站，點擊每一個鏈接查看實現效果——基本完美。直到打開一篇正文，發現右側總是空出一部分背景色，不能完全做到主柵格占滿全屏。其他正文都沒問題，只有這一篇有bug，而且用mac上的Safari、Chrome瀏覽器，用安卓手機測試都沒問題。找了很久也沒有找到bug出現的原因，只好作罷。 七、代碼管理——push到Github Git是一個分布式的版本控制系統，而Github提供了一個公開的git托管服務，同時也是目前最流行的Git托管網站。對于git的操作可以參閱我的博文?git學習小結。將代碼push到github上并公開就意味著代碼的開源。可以使用客戶端或者命令行的方式將代碼push到github。 這個項目的github地址是：https://github.com/earther01/transfemail 寫在最后 這個系統目前只是實現了最基本的存儲、展示功能，并沒有賬號控制，主頁也是十分簡陋。這一部分和我的具體需求有關，一部分是由于時間倉促。本著先實現再完美的原則，也算走完了整個建站流程。目前一個簡單的留言版已經實現，還沒有上線。后續如果有時間的話，會繼續充實主頁，添加一些實用功能。

轉載于:https://www.cnblogs.com/njczy2010/p/5572627.html

總結

以上是生活随笔為你收集整理的转 Django+Bootstrap练习--我的类博客系统开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。