どのように私は多くのコーディングせずに自分のブログを構築

二日後、私は自分のブログサイトを構築する計画を始めた.それは穏やかな週末だったので、私は私自身のブログサイトを構築しようとする様々な方法を探索するのに十分な時間があった.私の心に来た最初のソリューションのほとんどは、私自身の完全な本格的なブログのアプリケーションを構築することに関与し、データベース、ユーザー登録、コメント、好き、ビューカウント、インタラクティブコンテンツなどの多くの空想的な機能を含んでいたが、すぐに私はそれについて行くつもりはなかったので、それは私がしようとしていることのための過電圧です.正確である(高いレベルで)私の要求は以下の通りでした

多くのコーディングなしでブログを作成し、数時間で行う必要がありますので、私は私の週末を楽しむことができます.

すべてのポストのための新しいファイルを作成するだけで簡単に-するたびに、新しい投稿を追加するには簡単にする必要があります.

Pagination -これは重要な要件でした.というのも、私は、自分のUIを1つのリスト内のすべての利用可能な記事と爆撃することなく、定期的に一度にいくつかの記事を見ることを望んでいたからです

Markdown構文をサポートする必要があります-単純性を維持しながら良い表現性を持っています.

展開して、公開するのが簡単である-言い換えれば、私はGithubのようなプラットホームと深く統合されたCI/CDメカニズムのような何かを欲しかったですGithub-Pages ブログ一覧にもどる.

このポストでさらに進んで、私はどのようにこれらの要件が満たされたか説明します.探検と迅速なGooglingの後、私はこのツールを見つけましたjekyll , 驚いたことに、私のすべての要件(いくつかの追加で)をサポートしています.

救出へのジキル

ジキルはRubyパッケージであり、我々はプレーンテキストとしてコンテンツを書くことができます(もちろん、必要条件4に従ってMarkdownを使用して)と静的なウェブサイトに変換することができますから何かを構築する上で多くの心配する必要があります.また、カスタマイズのために、我々は自分のスタイル、ヘッダー、フッターなどを追加することができます私の独自のスタイルを追加することができます、GithubはジキルとGitHubページを構築する機能を提供し、彼らもよく確立しているworkflow これはコミットを聞き、自動的にビルドプロセスをトリガーし、新しい変更を要求します.我々はまた、そのコア機能を拡張するためにJekyllのために構築された多くのプラグインがありますpagination プラグイン(要件3に従って).
私は他の人が多くのコードを書くことなく簡単に始めるのを助けるためにこのポストを書くことに決めました.

1 .開始- GATHUBリポジトリの作成とGHページの有効化

これはかなり簡単です、あなたが以前にGithHubを使用したならば、おそらく、これはあなたのためにケーキ散歩のようです.

これに続いてくださいtutorial 新しいリポジトリを作成するには

これに続いてくださいtutorial GHページを有効にするには、作成したリポジトリについて機能します.

私の場合、私のブログに関連するすべてのコードベースはgh-pages 枝と下main or master , だから私はgh-pages ソース分岐として.Githubまた、選択するためにいくつかの事前設定ジキルのテーマを提供し、私は選択hacker テーマは、私はハッカーのFanboyMatrix and Mr.Robot .
一度実行したら、リポジトリをローカルに修正してテストします.

# clone the repository
git clone [email protected]:<your-username>/<your-repo-name>.git
# don't forget to check gh-pages branch
git checkout gh-pages

2 .ローカル開発とテストのためのRuby , Gem , Jekyllのインストール

あなたのブログをテストするためには、Rubyやその他のツールをインストールする必要があるかもしれませんが、コードベースに変更を加えることができるので、初期段階で役に立つでしょう.これらのコマンドを実行してRubyをインストールします( Red Hatや他のオペレーティングシステムに基づいたLinuxディストリビューションであれば、Ubuntuを使用します)this ページ)
Ubuntu 20.04 +について:

# start with an update (just to stay updated)
sudo apt update
# install ruby (gem will be installed along Ruby), We get tools like gcc, g++ and make via build-essential
sudo apt install ruby-full build-essential zlib1g-dev

すべてが設定されていることを確認するには、RubyとGenのバージョンを確認してください.

ruby -v
# on my system, it shows: ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [x86_64-linux-gnu] (can be different on your machine based on architecture and OS you are using)

gem -v
# 3.2.5 (on my machine)

gem or RubyGems Rubyのパッケージマネージャーですnpm , pip and cargo ノード、Pythonとさび.ジキルはdownloaded as a gem package , だから我々はgem コマンドを実行する.しかし、ローカルにウェブサイトを構築するために、我々は他の多くのツールを必要とします.github-pages gem これらのツールを提供します.jekyll と一緒にパッケージ化されますgithub-pages . したがって、インストールする必要がありますgithub-pages ジェム.

# use sudo if you are getting permission error
gem install github-pages

ブログの設定

ジキルと他のツールがインストールされると、あなたのブログを設定できます.最も簡単な方法はクローンですmy repository とチェックアウトgh-pages 枝.あなたが私の倉庫で見るソースコードの大部分はtocttou/hacker-blog . クローンすると、自分のリポジトリの内容をリポジトリにコピーしますgh-pages これらのコマンドを実行します.

# clone my repo
git clone [email protected]:Narasimha1997/blog.git
# change directory to by repo you cloned just now
cd blog
# checkout gh-pages branch
git checkout gh-pages
# remove all my existing posts
rm -r _posts/*.md
# copy all the contents to your repo directory
cp -r . /path/to/your/repo

今すぐあなたのプロジェクトディレクトリに戻って_config.yml あなたのニーズに応じてファイル.現在_config.yml 以下のようになります.

# title and description of the site (will be used in <title> tag)
title: Narasimha Prasanna HN
description: Software Developer - Python, JavaScript, Go, Rust
# use hacker theme
theme: jekyll-theme-hacker
# this is the base URL (use http://localhost:4000/blog/ to access locally)
baseurl: /blog
plugins:
  # use paginator plugin
  - jekyll-paginate
defaults:
  -
    scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
source: .
destination: ./_site
permalink: /:title
# display 3 posts in a page
paginate: 3
paginate_path: /page/:num/
# this will be displayed as the banner of the blog's home page
banner: "root@prasanna-desktop:~#"
# your linkedin profile
linkedin: https://in.linkedin.com/in/narasimha-prasanna-hn-17aa89146
# your Github profile
github: https://github.com/Narasimha1997
# your portfolio
portfolio: http://prasannahn.ml/

このファイルのコメントは、各パラメーターの意味を理解するためにご案内いたします.一度変更すると、ローカルにあなたのブログを提供することができます.実行:

jekyll serve

次に、サイトを見ることができる必要がありますhttp://localhost:4000/blog/ . Jekyllライブリロードをサポートしているので、あなたの変更を表示せずにサイト上で実行せずに表示することができますjekyll serve コマンド再び.

Githubにブログを公開します

設定に満足したら、変更を段階化し、ローカルコミットを行い、リモートブランチにプッシュしますgh-pages ). これは以下のコマンドを実行します.

git add .
git commit -m "<some nice message>"
git push origin gh-pages

GitHubのリポジトリに行くと、ワークフローがトリガされ、ワークフローが実行されます
ほぼ同様の手順をローカルにし、ウェブサイトを展開します.ワークフローが完了すると、ブログをチェックすることができます.https://<your-username>.github.io/<your-repo-name> 私にとってはhttps://Narasimha1997.github.io/blog , あなたが見ることができるhere .
もともと私のblog .