關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

如何在本地自建 Octopress 部落格及打包靜態html檔

| Comments

如何在本地自建 Octopress 部落格及打包靜態html檔

Octopress 已經很多年沒有更新,目前主要有 Logdown 還有在使用,目前為了能夠快速的搬家,還是決定先能將文章轉移再說。這裡說明如何在本地安裝好 Octopress 以及將 logdown 文章匯入:

mac 本地安裝 Octopress

確認 ruby ,通常mac都會預設

$ ruby -v

clone octoprsess

$ git clone git://github.com/imathis/octopress.git octopress
$ cd octopress

更新環境

$ brew install nodejs
$ brew install rbenv

安裝 bundler

$ sudo gem install bundler
$ bundle install

修改 Gemfile,調整 rake 版本,首先先取得目前 rake 版本

$ rake --version

>>>output 12.3.2

接著開啟 Gemfile

$ vim Gemfile

修改為 rake 最新版本號,例如我目前的最新版本是 12.3.2

$ gem 'rake', '~> 12.3.2'

安裝 Octopress default theme

$ rake install

## Copying classic theme into ./source and ./sass
mkdir -p source
cp -r .themes/classic/source/. source
mkdir -p sass
cp -r .themes/classic/sass/. sass
mkdir -p source/_posts
mkdir -p public

設定網站

設定你的網址,網站名稱及相關資訊,開啟 _config.yml

$ vim _config.yml

設定的內容如下:

# ----------------------- #

#      Main Configs       #

# ----------------------- #


url: http://adon988.hoohoo.top
title: 關於網路那些事...
subtitle: 網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事
author: Adam OuYang
simple_search: https://www.google.com/search
description: 

Octopress 啟用 Disqus

安裝 Disqus,在 config.yml 進行以下設定,先前往 disqus 申請帳號及取得shortname,接著將 disqusshow_comment_count 設定為 true

# Disqus Comments

disqus_short_name: {在 Disqus 申請取得的 shortname}
disqus_show_comment_count: true

新增一篇文章

透過以下語法可新增文章

$ rake new_post["文章標題"]

預覽網站

$ rake preview

會啟用 localhost:4000 可以直接預覽

打包檔案為靜態檔

透過以下指令可以將文章打包圍 html 靜態檔案,產生在 public/ 底下

rake generate

接著如果有其他主機空間,可以直接將 public 底下的檔案上傳到 web server root path 即可。

錯誤處理

rake aborted!
Gem::LoadError: You have already activated rake 12.3.2, but your Gemfile requires rake 10.5.0. Prepending bundle exec to your command may solve this.

面對這錯誤訊息,只要執行 bundle update rake 即可。


聲明,近期發現有平台大量盜用文章內容,若您發現內文非來自關於網路那些事 [https://adon988.logdown.com](https://adon988.logdown.com) ,希望您與我聯繫 [https://www.facebook.com/ThinkingWebsite](https://www.facebook.com/ThinkingWebsite)
(本文章源自"關於網路那些事)

最後,如果你喜歡這篇文章,請幫忙點個讚



最新文章推薦

討論

comments powered by Disqus