---
# System prepended metadata

title: 'Make a blog by Django : Learning Notes'
tags: [django, blog, python]

---

<h1>Make a blog by Django : Learning Notes</h1>
<h2>Django blog w/ auto generated slugs && MD rendered on html</h2>
<p>2021/11/14<br>
Useful resource for Django Markdown<br>
   

* [Django Markdown Tutorial](https://www.youtube.com/watch?v=t61nTi0lIlk)

    
Django Automatically Generate slugs
* [Django Build a blog application with bootstrap and Automatically Generate slugs](https://www.youtube.com/watch?v=3D5bAfNTJZw)
</p>




---
<h2>Django blog Post w/ MD editor</h2>
<p>2021/6/20~7/4<br>
我在YT上看到django蓋blog手把手教學影片，總共有36集，影片教學結果部落格有user management, post CRUD, comment。看起來很多觀念都可以順便練到。跟到第五集時，blog的基本雛型就出來了。</br></br><img src="https://i.imgur.com/L5EKfyZ.png" alt="blog screenshot" width="200" /> </br></br> 可惜影片沒有教如何把 text editor tool加入django admin，於是我上網爬文，最後使用 mdeditor:

- [mdeditor github](https://github.com/pylixm/django-mdeditor) 
    - django admin 後台使用
    - admin content field 有了編輯器，但要如何讓 html 有效果?
- [install markdown](https://learndjango.com/tutorials/django-markdown-tutorial)
    - 前台顯示要 pip install markdown   
- [markdown extentions](https://python-markdown.github.io/extensions/) 
    - 目前我是用 `markdown.extensions.extra`
    - 但有些基本的md，在mdeditor preview可以顯示，但html不行，例如從local端上傳照片、引用、emoji，我在想可能html extention可能沒支援。<br><small>(murmur: 但從md extension的官方教學上來看，extra看起來是最包山包海的了，查了許久未果，我想先用基本的好了，但這功能的網路教學，目前不論中文或英文，找到都很片面，還有看到教學文章指令英文拼錯，這樣叫人怎麼相信作者有自己跑過一次@@)</small>
![](https://i.imgur.com/1ONE4fn.png)

</p>

---

<h2>網路問題真的很痛苦</h2>
<p>2021/6/6~6/20<br>這兩周工作比較忙，平日能寫玩code的時間變少，且又遭遇兩個主要網路問題: <BR>

**1. VM SSH連線失敗: Bitvise ssh連線噴錯**

`Connection failed. FlowSocketConnector: Failed to connect to target address. Windows error 10061: No connection could be made because the target machine actively refused it.`

後來修改連線資訊，原本我是填連線到IPV4的網址(192.xxx.xxx.xxx), 後來改成 127.0.0.1(想想滿白癡的，VM網路連線我設定ss的主機IP是127.0.0.1，兩者不合當然不通。)

**2. Localhost 開不起 Django admin**

runserver有成功訊息，但127.0.0.1:8000就是failed to connect。<br>爬了文，我試著runserver其他PORT, allowed host改成[127.0.0.1:8000]，但都沒有成功。後來也是滿神奇的，裝上ngrok後，我重新runserver, allowed host改回預設["*"]，local突然可以連了:confused: 之後有空再重裝一次看看會不會重現問題好了，總覺得沒完全弄懂。


* reference:
    * [Alan Tsai學習筆記](https://blog.alantsai.net/posts/2018/04/devtooltips-5-ngrok-allow-public-to-access-localhost-website-and-sql-server)
    * [ngrok](https://ngrok.com/)
</p>


---
<h2>CSS + HTML basic</h2>
<p>2021/6/5~6/6<br>Ubuntu安裝教學，通常都會教裝apache, 讓你可以在local端build起 helloWorld。於是中間我花了點時間，先練習html, css。做了一個靜態網頁練習:<br>

* [Tribute page](https://codepen.io/yishanhsieh/pen/oNZdZoL)
</p>


---

<h2>Start from Installing Ubuntu</h2> 
<p>2021/5/29~30</br>以前公司線上會議時，常常看到工程師的螢幕分享是Ubuntu的畫面，因此我想，要學寫程式，就從安裝Ubuntu開始吧!當時也沒想太多，只想要灌雙系統，於是爬到一篇號稱是 "保母式教學"的文章，我照上面切磁碟空間、也找了usb裝Ubuntu，但是在最後一步，開BIOS重啟系統時，卻一直無法看到Ubuntu的安裝UI。<br>問了搞韌體的哥哥，但他給我的良心建議是改去用VM，因為這樣Ubuntu被我搞壞了，也不至於有根本性破壞。Youtube上有非常多VM教學，基本上全新手，不到半小時就架起來了，Ubuntu也灌好了。


* reference:
    * [Everyone needs to learn linux](https://www.youtube.com/watch?v=l9YxTXDiiFY&t=718s)
    * [(保姆式教學) Win10 + Ubuntu 20.04](https://www.gushiciku.cn/pl/gfr7/zh-tw)
    * [Host FREE website @ Home 1 - Build a Linux Server](https://www.youtube.com/watch?v=uyF3gC9lQtE&t=2s)
    * [Host FREE website @ Home 2 - Apache2 & Port Forwarding](https://www.youtube.com/watch?v=KvLj-TNXFDs&t=484s)

</p>