ワードプレスから離れた

帰属Wordpress logo , Jekyll logo
こんにちは😄
私は最近WordPressからブログを動かして、ジキルとGitthubページを使っている静的発電機の素晴らしい語に飛び込みました.このポストは、全体的なプロセスがどのように見えるか、そして私が参照とともに加えた追加のカスタマイズのいくつかであるかについて話します.getstartしましょう.

なぜ

なぜ?よく、WordPressは私にとって最初に素晴らしいことだった.それは私が必要な技術的なセットアップの任意の考慮なしにブログを開始することができ、それは非常に簡単に数分以内にフル機能のブログを持っていた
しかし、時間が経つにつれて、全体的な経験は少し膨らんだ感じ、私が実現したことは、私がnopreallyプラットフォームとしてWordPressを提供するすべての能力を利用することです.
また、私が必要とするかもしれないどんな新しい機能のためにも、私はWordPressプラグインを加えなければなりませんでした(そして、少なくとも必要であるビジネス計画)
それは私が私の目標は、私は完全な制御を持っていると最小限の、高速な技術的なブログを持っている/私はすべてのニーズが発生する可能性がありますにカスタマイズし、これは最終的には、突入を持ち出し、WordPress

静的サイトジェネレータ（SSG）の世界へようこそ

私は静的サイトジェネレータの前に気づいていたし、ジキル、ヒューゴ、スフィンクスの他の多くの聞いた.このあたりのいくつかのビデオを見て、最終的に私のニーズのために必要な機能性とカスタマイズを持っているJekyllを見つけました
ジキルを支持する動機要因の一つは、それがGitThubと非常に緊密な統合を持っていることであり、加えて、サイトのホスティングは非常に丁重にギタブによって世話されている.私はNoneUp上のドメインを購入し、セットアップを行うには、サイトを移動してよかった.🙌
一番上のアイシングは、私の全体のワークフローには、プレーンワークダウンの記事を書いて、出版ワークフローのためにgitとgithubを使用している記事が含まれていました.それよりも最小限になることはできません.😆
他の人たちが既にこのプロセスのために出していた多くの良いチュートリアルがあった

Tomomi Imura - How-to: Migrating Blog from WordPress to Jekyll, and Host on Github

Hadi Hariri - Migrating from WordPress.com to Jekyll

WebJeda - 4 Steps To Migrate From WordPress To Jekyll

以下は私が取ったステップとその周辺の経験です.

WordPressから輸入をダウンロードしてください

現在のブログがどのプラットフォームにホストされているかによって、Jumkyllが理解できる形式にダンプを変換するために使用できる別の輸入業者があります
私のサイトは2009年にホストされましたwordpress.com そして、私はコンテンツをダウンロードしてJekyll import tool
一度上記でやった、それは私のすべての画像と他のポストとのサンプルレイアウトを与えた_posts ディレクトリ

RubyとGemのインストール

ジキル博士は非常によく書かれており、これらの詳細については、Ruby、rubygemsと他のLIBSの設定を開始する前に説明します.指示に従ってくださいJekyll Quickstart
一度完了したら、以下の新しいジキルサイトを作成する手順です
デフォルトミニマテーマで空のジキルサイトをつくってください

jekyll new <yourname.github.io>

Note: You should have a repository with yourname.github.io in GitHub already, You can eithercreate it first and then clone and then run above command or usegit remote add origin <your_repo_url> >Read more here

localhostに新しく作成されたサイトを提供できます.localhost:4000 :

bundle exec jekyll serve

Jekyllでは、ポストは維持されます_posts ディレクトリとyyyy-mm-dd-<title> また、_drafts あなたが準備ができて、ポストの下でそれを動かすまで、フォルダとジキルはあなたのサイトにtheseonを提供しないのに十分スマートです
あなたのローカルサービスジキルウェブサイトでドラフトを表示する場合

jekyll serve --draft

Githubにプッシュし、ライブです

一度GitHubにサイトをプッシュすると、セットアップのために数分かかるでしょう

ドメインの設定

デフォルトのドメインを使用することができます..github.io ) または独自のセットアップ.
自分のドメインを設定するにはCNAME フォルダのルートで

automationhacks.io

設定を変更する

また、リポジトリの設定でこのドメインを追加する必要があります
カスタムドメインでこのドメインを追加し、ドメインがSSLをサポートしている場合はHTTPSを選択します.これをどうするかについてもっと読みなさいGithub docs

DNSプロバイダ

あなたは非常に簡単に任意のプロバイダのドメインを購入することができます.私は私のサイトのname安いを使用して設定する必要がありますA record あなたの高度なDNSの設定で.GithubサーバのIPアドレスに注意してくださいので、最新のものを理解して、あなたのセッティングで取り替えます

Once the setting has been done in your Github repository and the domain provider. Wait for sometime for the setting to take effect. Usually a few hours but can take max of upto 24 hours

プラグインでカスタマイズを始めましょう

ジキル用途 Gems MightHorseと関連するプラグインのほとんどの機能については、以下の基本的なプロセスです
以下の行を追加する_config.yml 下group :jekyll_plugins do , 下記は私が最初に加えて、私が更なるセクションまたは将来のブログ柱で説明するいくつかの

group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.12"
  gem "jekyll-seo-tag", "~> 2.6"
  gem "jekyll-gist"
end

その後、すべての宝石をインストールすることができますGemfile 下記の

bundle install

次に、これらの下にプラグインリストを追加します_config.yml

plugins:
  - jekyll-feed
  - jekyll-paginate
  - jekyll-seo-tag
  - jekyll-gist
  - jekyll-twitter-plugin

いくつかのマニュアル修正を行う

エクスポートとインポートのプロセスは、いくつかのクリーンアップの活動を投稿/ページでは、これらのいくつかを自動化する可能性がありますalarge十分なサイトのために行われる

符号化文字列

エンコードされた文字列が表示され、次の文字が置き換えられます.

&#8217; <single quote>
  <space>

ギタブギストをレンダリングする

また、コードサンプルのgithub gistsを使用している場合は、これらのページに表示されないことがあります.これらを修正するには、HTMLコードブロックをデータGISTで見つけ、リキッドタグの下に置けばいいですが、ここでのクールなことは、独自のGITUBアカウントであるため、

{% gist d366955370d58dc2ca40c185b62cd829 %}

フィックスイメージ

WordPressからダウンロードされたすべての画像をassets/images そして、あなたが彼らのポスト/ページの中で参照を固定します
いくつかの手順は次のようになります.

検索<figure> or <img> タグを置換します![image alt text](path_to_assets) またはsrc 属性を指定すると、wp-content フォルダとので、最も簡単なことは、下のフォルダ全体を移動することですassets/images そして、これらのイメージへのリファレンスを修正

より具体的には、/wp-content with /assets/images/wp-content

オプション更新

検索<pre> Jekyllルージュを使用して構文強調表示を取得するために、タグとコードブロックを置き換える

あなたがサイトの上であなたのブログを掲示しているならばdev.to or medium , それから、あなたはあなたの新しいブログ・サイトがそうであるように、toupdate CanonicalRange URLが欲しいかもしれませんcanonical reference

最後にローカルサイトをチェックするhttp://127.0.0.1:4000/ にプッシュする前に

Note: There would be lot of HTML mixed with markdown in the blog and while you can certainly fixthem into a markdown syntax, it would take a long time. I decided to let it be as long as theURLs/Images were fine

コメント

ブログのコメントを設定するにはdisqus.com , プロセスは非常に簡単ですし、disqus上のアカウントを作成する必要があります_config.yml

# Disqus Comments
disqus:
  # Leave shortname blank to disable comments site-wide.
  # Disable comments for any post by adding `comments: false` to that post's YAML Front Matter.
  shortname: <your_shortname>

あなたのページがあるならば、これはDisqusコメントブロックを示し始めますcomments: true 正面から
コメントがすべてのページで有効になっていることを確認したい場合は、デフォルトで_config.yml , これは甘い😆 すべてのthepost frontmatterで同じ値を繰り返す必要がないので.

defaults:
  - scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
      author: Gaurav
      comments: true

Psst 🤫: You might want to refer tothis blog for details

セットアップGoogle Analytics

あなたは、Google Analyticsまたは同等のあなたの聴衆にいくつかのアイデアを得るためにフックする必要があります.Google Analyticsのアカウントを作成し、それを一意のIDを与える必要があります.YLLFileとは、基本的な分析に行くには良いです.
明らかに、より多くのカスタマイズを行うことができますが、それはおそらく将来のポストになります

# Google Analytics
google_analytics: <unique_id>

Psst: 🤫: Refer to this for more details

概要

Voila、あなたは完全にカスタマイズ可能なサイトをアップロードして実行している.私はジキルについてもっと知りたいので、将来についてもっと投稿します.
あなたがこのポスト役に立つならば、友人または同僚とそれを共有してください.次まで.Happycoding

参考文献

以下にいくつかのリソースを参照してください.

Jekyll docs

Setting up domains in Github pages

4 steps to migrate from Wordpress to Jekyll

Migrating from WordPress.com to Jekyll

ジキルの詳細については、チェックアウト