WEBSITE

筆記|手把手架站教學 門外漢也可以無腦從0到1架設網站

其實原本沒有想要寫這篇的,作為一位非架設網站的專業人士,擔心這篇寫起來會有點七零八落的,但是覺得架設網站的過程實在是太有趣了(?),不斷的經歷各種以前沒有遇過的問題,然後上網不斷的找解決方法,或是詢問各方友人,畢竟身為一個純正文組人,程式碼那些文字就是一個「每個單字我好像都可以理解,但組合起來到底是什麼天方夜譚」,在此先感謝所有估狗大神跟過程中不斷被我騷擾的友人們,畢竟我應該常常不小心問出一些白癡問題,但畢竟非自身的專業領域,還很有耐心的解釋真的是萬分感謝!

事前考慮

在架網站之前,請你先想清楚「是否有需要自己的網域」及「選擇付費/免費虛擬主機平台」

是否有需要自己的網域表示的是「是否希望有一個乾淨的網址」,以此網站為例就是「fengniii.com」則是一個乾淨的網址,完全就是自己自訂的內容。或者是覺得將自己的網站架設在其他網頁下也可以接受,以wordpress.com為例則像是「(自訂網址).wordpress.com」會有後綴網址,另外痞客邦、medium.com 也是屬於這種會有後綴的網址。通常若想要有自己的專屬的乾淨網域的話,都需要自己購買網域。

虛擬主機的服務這部分,很抱歉我真的就不太懂了Q如果需要詳細了解的話請直接善用估狗,網路上的大神們很多都把這個概念(?)介紹得很好。以我這個完全門外漢理解的內容,最簡單的解釋(錯的話不要罵我Q_Q)就是假設網站有很多資料需要上傳到雲端主機才可以運作(當然也可以用自己的電腦作為主機,但幾乎不會有人這樣做),付費跟免費當然有很多功能、效能、服務上的差異,例如網路空間的大小啊、流量啊託管服務之類的,主要就是看個人的需求選擇就可以了。

適合對象

先說這篇文章適合的對象應該是要像我這種什麼都不懂的人(??),純正文組出身,看到程式碼之類的文字就覺得頭痛想直接關閉網頁,對於架設網站沒有什麼太多的概念,也沒有任何相關知識,但又很想要自己架一個網站看看的人,這篇可以直接看下去(雖然我中間也有很多偷吃步)。

想從wordpress.com搬家到wordpress.org的人!!沒錯,雖然都是wordpress,但是com跟org真的是不同的網站(但都是同一個系統),com是網誌服務商,就像是無名小站、痞客邦這樣個概念,而org則是文章管理系統,是有開放語法編輯跟外掛下載的!
當然如果你不想用wordpress系統的話也可以,只是用其他系統的話我就沒有研究了,這篇文章可能只有前半部對你會有幫助,後半部也會提到我從wordpress.com搬家到wordpress.org的過程。

評估了一下自己目前對於想架設網站的需求跟定位,這篇文的內容會是針對「購買自己網域」、「使用免費虛擬主機」、「導入wordpress系統」這三個重點做出發。

架站步驟

開頭的部分先說這篇文的幾個大步驟,一整個網站架設下來,就算是初初初學者,也可以在兩三個小時內完成!

1.購買網域
2.申請虛擬主機帳號並連結網域
3.串接網域跟虛擬主機
4.下載wordpress系統
5.從wordpress.com搬家到wordpress.org

1.購買網域

其實在很早之前就很想要有一個自己的網域名稱作為自己網站的標誌,一部分是覺得太長的網址真的很不方便記憶,一部分只是自己的強迫症作祟想要有一個簡單乾淨的網址。花了一點時間上網找網域購買的網站跟文章,最後選擇了這間GoDaddy,選擇他最大的原因就是因為他是中文介面而且有中文客服!雖然網站架設到後期,覺得用英文跟客服溝通也已經不太是什麼難事,但有中文客服總是方便一些。

那位自由女神|芬妮Fengniii - [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii – [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站

進入網頁之後,直接於最上方「找出完美網域」的部分輸入你希望的網址內容,以本網站為例「fengniii.com」的話,可以只輸入「fengniii」即可,dot com的部分,在按下「搜尋網域」後,除了推薦的網址外,也會有多種dot xxx 可以自由選擇。

那位自由女神|芬妮Fengniii - [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii – [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站

選擇好自己喜歡的網域之後,加入購物車即可。進入購物車後他會有加購服務,其中包含網域保護、信箱位置加購(自訂帳號@自己申請的網域結尾 的信箱地址)跟虛擬主機,請再根據自己的需求選擇加購,特別需要注意的是,創建帳號的資料是會被半公開,所以如果希望加密的話請記得再購買加密服務。

加購內容確認後請點選前往購物車,並確認購買明細是否正確,確認無誤後請點選「付款」。隨後請完成後續建立帳戶(/登入)、付款方式等步驟完成付款。完成後會收到來自GoDaddy的確認信件,購買網域的部分就先告一段落了。

2.申請虛擬主機帳號並連結網域

其實我在這部分卡關了幾天,說是幾天其實是因為原本設置的虛擬主機並沒有提供SSL安全憑證(需另外購買),後來想要轉換虛擬主機位置,希望他們把我原先註冊的網域撤銷,但一直聯繫不到他們的客服,就卡住了。所以在申請虛擬主機前,請先確認好自己希望申請的虛擬主機有提供的服務,另外,英文可以搜尋到的資源真的比中文可以搜尋到的資源要多上很多,如果在能力許可下,就多使用英文搜尋所需要的資源吧。這裡提供[筆記] 整理推薦5個免費虛擬主機支援WordPress 條列特色優缺點 一目瞭然可以根據自己的需求選擇適合自己的免費主機。針對付費主機的部分,目前找到最多中文推薦的應該是Bluehost,作為全球第一大虛擬主機平台,網路上也有很多教學文章可以查詢。

另外一定會有很多人好奇「免費虛擬主機真的好嗎?」「他們到底要賺什麼?」,這個問題我也有想過,後來稍微查了一下,很多免費虛擬主機平台其實也都有付費服務,他們主要是先提供使用者免費使用平台,並等待使用者習慣上手後,許多使用者就會轉而購買該平台的相關服務。至於「好不好」這個問題則是見仁見智了,作為設立網站的初初初學者,個人覺得免費的平台的服務其實已經足夠應付所需的需求,等到未來有更多需求再購買相關服務其實也不遲。(但根據自己的經驗,更換主機可能會使網站死掉一兩天QQ)

這篇文要來介紹的是100WebSpace這個網站。選擇這個網站是因為他們的主機有提供SSL安全憑證的服務。為什麼這個安全憑證那麼重要呢,其實詳細的作用部分我也不是很了解,以結果來說,如果沒有這個憑證,網頁就會被顯示為不安全網站,在google搜尋上就會對評分有很大的負面影響。我第一個申請的虛擬主機就沒有提供這個服務,然後自己上網找解決方法,想說說不定可以自己解決,結果試著試著就整個網站死掉救不回來(到網頁後台都沒辦法登入的狀態),所以作為一個沒有專業背景知識的人,請直接找一個別人直接幫你用到好好,以節省自己的所有麻煩。另外,100WebSpace這個網站也有支援中文介面,但我自己在使用上後來覺得英文介面還是比較好用(可能因為我第一個使用的虛擬主機是全英文介面,然後已經習慣相關單字的原因)

那位自由女神|芬妮Fengniii - [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii – [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站

進入網頁後請點選右上角的「sign up free」或是FREE HOSTING的「GET STARTED」進入頁面註冊。

那位自由女神|芬妮Fengniii - [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii – [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站

請於Hosted Domain欄位填寫於步驟 1.購買網域 時購入的網址後點選continue。完成後填寫相關聯繫資訊已註冊帳號,是說不知道是他們帳號註冊時的問題還是我自己網頁的問題,我最後的帳號居然是「微亂碼」,「微」的意思是,他跑出了一些不是我原本打的字XD 但覺得不影響後續的使用,所以就還好了。

3.串接網域跟虛擬主機

虛擬主機註冊完成之後,接下來就是要串接到網域。也就是步驟1所購買的網址,點進去之後要變成自己架設的網站(這篇指的就是wordpress系統),所以需要設定DNS。

那位自由女神|芬妮Fengniii - [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii – [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站

這時候請再回到GoDaddy,右上方的【^】點選「我的產品」,拉到下方「所有產品與服務」的地方,選擇「DNS」,點進去之後於「域名伺服器」欄位新增域名。(好啦,如果這邊不知道到底該怎麼操作的話請直接找客服,我那時候連這邊都卡關,所以直接請客服幫我新增,真的謝謝客服大大)

那位自由女神|芬妮Fengniii - [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii – [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站

這邊要新增的兩個域名伺服器名稱為100WebSpace管理頁面拉到下方的「System info」裡的「DNS Servers」欄位中的兩個網址。完成設定後需要一點時間才會連結到虛擬主機,所以不用急著在網頁的網址欄搜尋自己的網址,可以先進行以下步驟,完成後再搜尋自己網址就差不多連結完成摟。

4.下載wordpress系統

有些虛擬主機是需要自己到wordpress系統下載程式再安裝到主機上(我的第一個虛擬主機就是這樣),相較之下略顯麻煩,100WebSpace他們有提供讓你直接安裝wordpress,只要直接點選就可以省去先到wordpress.org下載程式再上傳主機的步驟。

這裡直接點選網址( https://cp.100ws.com/installer/software-installed/ ),於下拉選單中選取「wordpress」,並填寫相對應內容

那位自由女神|芬妮Fengniii - [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii – [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii - [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii – [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站

Domain:選擇你購買的網域網址
In directory:可不輸入
這兩欄輸入完成後會於下方顯示你的wordpress網址預覽
Admin user:輸入屆時wordpress後台使用者帳號
Admin password:輸入屆時wordpress後台使用者密碼
Admin mail:輸入屆時wordpress後台使用者信箱
weblog title:部落格名稱 (之後可修改)

全部輸入完成後「install wordpress」即可,等它安裝完成後即大功告成了!這個時候可以再回去確認上一個步驟的網址串接是否成功,打開一個新的網頁頁面,於網址處搜尋你的購買的網址,以確認串接是否完成,如果沒有完成的話就要再往回看是哪一個步驟出問題,如果真的找不到的話,可以直接詢問GoDaddy或100WebSpace(客服僅提供英文服務)的客服。

以上網站架設的部分已經全數完成了!另外前面提到的SSL安全憑證的部分,可以到100WebSpace的「Hosted Domain」中,下拉到自己的網域,點選SSL欄位的圖示(這邊因為已完成SSL憑證,所以圖示會不同,怕誤導所以直接馬賽克)完成SSL安全憑證的申請。

那位自由女神|芬妮Fengniii - [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii – [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站

完成後,興奮的點回自己的網站,怎麼重新整理都還是顯示「不安全網站」,這是因為設定還沒完成,還需要回到wordpress進行SSL憑證的安裝。這時候請下載wordpress外掛「Really Simple SSL」後按「Active SSL」一鍵完成SSL憑證安裝,省去各種設定的麻煩。

5.從wordpress.com搬家到wordpress.org

完成了以上的所有步驟後,架設網站的步驟就告一段落了!如果過去有在wordpress.com平台發表文章,想要把內容直接搬家到wordpress.org的話再繼續看下去。

首先先登入你的wordpress.com的後台側欄工具欄位點選「匯出」,點選「完整匯出」,或者如果有需要的話可以點選箭頭篩選部分內容匯出即可。隨後匯出的檔案就會寄到你的信箱裡,再把檔案下載到電腦即可。(記得只有提供七天可以下載哦,時限超過就要再重新匯出一次)

那位自由女神|芬妮Fengniii - [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii – [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii - [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii – [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii - [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii – [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站

完成後回到wordpress.org的平台,也就是現在你自己網域的後台,在側欄「工具」中點選「匯入程式」,於wordpress欄位點選「立即安裝」,安裝完成後點選「執行匯入程式」,檔案點選剛剛匯出wordpress.com的解壓縮後檔案,並點選「上傳檔案並匯入」。

那位自由女神|芬妮Fengniii - [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii – [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii - [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
那位自由女神|芬妮Fengniii – [筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站

完成檔案搬家匯入的步驟。以上就搬家完成了哦!接下來只要再檢查一次內文格式/圖片有沒有跑掉就可以了。檢查的這個步驟真的很重要,因為很多格式在wordpress.com平台當中可能有支援,但是到了wordpress.org的平台就變得沒有支援了,所以可能會有很多格式需要重新設定。

以上!網站架設跟搬家的教學到此結束,真的是就算是完全沒有任何背景知識的人也可以輕鬆架網站,以前一直覺得這是一件很困難的事情,雖然是真的有很多很困難的地方,我自己就很常在一些很簡單的地方卡關很久,試行錯誤很多次之後,整理出以上最簡單方便的架站方式給大家。只是我最一開始沒有打算要打這篇文章,所以製作當下都沒有逐一截圖步驟,這些圖片都是後來才補上的,希望可以足夠理解架站的步驟,如果有任何問題也歡迎直接問我(但我不一定答得出來就是了)

祝福大家架站都成功!這篇文章就先打到這裡,有任何問題歡迎留言跟我說,如果喜歡這篇文章或是覺得這篇文章有幫助到你的話也歡迎分享給身邊的朋友。我是那位自由女神,我們下次再見,掰掰。

延伸閱讀

[筆記] 整理推薦5個免費虛擬主機支援WordPress 條列特色優缺點 一目瞭然
[筆記] 1天只要1元台幣 平價崛起IvacyVPN 輕鬆跨百餘國家| IvacyVPN 特色、優缺點評比
日本文化 #1 日本車牌知多少,原來暗藏了那麼多資訊

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。