handmade blog

✍️

ハンドメイドブログ

この文書を別の言語で読んでください: ?? ?? ?? ?? ?? ?? ??

ハンドメイド ブログは、ブログをすぐに始めたい人のための軽量の静的ブログ ジェネレーターです。ブログ投稿の記事タイプのドキュメント、ポートフォリオの作品タイプのドキュメント、コードのハイライト、KaTeX 構文、脚注などをサポートしています。

デモ: こちら

ショーケース

• betty-grof.github.io: https://github.com/betty-grof/betty-grof.github.io
• parksb.github.io: https://github.com/parksb/parksb.github.io

灯台の結果

モバイルのarticle/0.html

デスクトップ上のarticle/0.html

はじめる

1. ファイルリストの上にある「このテンプレートを使用」ボタンをクリックして、新しいリポジトリを作成します。 github.io ドメインを使用する場合は、リポジトリに{YOUR_ID}.github.ioという名前を付ける必要があります。 (例: betty-grof.github.io ) 「すべてのブランチを含める」オプションを忘れずに有効にしてください。

   

   

2. リポジトリの [設定] タブをクリックし、GitHub Pages のソース ブランチをgh-pagesブランチに設定します。 GitHub Pages はgh-pagesブランチに基づいて Web サイトをホストします。数分以内にhttps://{YOUR_ID}.github.io/経由で Web サイトにアクセスできるようになります。

   

   

3. リポジトリのクローンを作成し、ノード パッケージをインストールします。

   $ git clone https://github.com/{YOUR_ID}/{REPOSITORY_NAME}.git # git clone https://github.com/betty-grof/betty-grof.github.io.git
   $ cd {REPOSITORY_NAME} # cd betty-grof.github.io
   $ npm install

4. ナビゲーションのタイトルなどのテキストをカスタマイズし( app/templates/navigations.ejs内)、 npm run buildを実行します。

    < nav >
     < a class =" logo-link " href =" / " >
       < h1 > CUSTOMIZED BLOG TITLE </ h1 >
       < span > customized blog subtitle </ span >
     </ a >
     < small >
       < a id =" about " class =" info-link " href =" /about.html " > ?About </ a > /
       < a id =" works " class =" info-link " href =" /works.html " > Works </ a > /
       < a id =" articles " class =" info-link " href =" /articles.html " > Articles </ a >
     </ small >
   </ nav > 

   $ npm run build

5. npm startスクリプトを実行して、 http://localhost:8080/でリッスンするローカル サーバーを起動します。ローカルサーバーはdistディレクトリに基づいています。

   $ npm run build
   $ npm start

   

6. 作業ディレクトリ内の変更をコミットしてリモート リポジトリにプッシュします。

   $ git add ./app/templates/navigations.ejs
   $ git commit -m " Customize the blog title and subtitle "
   $ git push origin master

7. Web サイトをホストする準備ができたら、 deployスクリプトを実行します。このスクリプトは、ローカル ファイルをdistディレクトリに構築し、 distディレクトリ内のファイルのみを含むgh-pagesブランチにプッシュします。 GitHub Pages は、 gh-pagesブランチに基づいて Web サイトをhttps://{YOUR_ID}.github.io/で自動的にホストします。

   $ npm run deploy

使用法

ライブリロード

1. npm run watch実行して変更をリアルタイムで追跡します。
2. npm start実行してローカルサーバーを起動します。 ( npm run watchバックグラウンド、他のタブ、または他のセッションで実行されている必要があります。)
3. 今後は、 app/templates 、 app/styles 、および_articlesディレクトリ内のファイルに変更を加えるたびに、自動的にビルドされます。

文書の作成と公開

1. _articlesまたは_worksディレクトリにドキュメントを書き込みます。
2. npm run publish articleまたはnpm run publish work script を実行して、マークダウン ドキュメントを HTML に変換します。
3. npm startスクリプトを使用して、ローカル サーバー上で変換されたドキュメントをプレビューします。
4. 変更をコミットしてリポジトリにプッシュし、 npm run deployを実行してデプロイします。

テンプレートの編集

ejs テンプレートを変更して、既存のページのコンテンツを変更します。たとえば、ランディング ページに画像を配置する場合は、 app/templates/index.ejsファイルを開き、 imgタグをmain-container要素に追加します。

 < main id =" main-container " >
  < img src =" ../assets/profile.jpg " alt =" My profile picture " />
  < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ p >
</ main >

次に、 npm run buildスクリプトを実行して、変更されたランディング ページを公開し、 npm startスクリプトを使用してローカル サーバー上の変更をプレビューします。

$ npm run build
$ npm start

デプロイの準備ができたら、 npm run deployスクリプトを実行します。ランディングページだけでなく、どのページでもこのように変更できます。 (プロジェクト構造を理解する必要がある場合があります。)

カスタムドメインの追加

ルート ディレクトリに CNAME ファイルを作成します。ビルド プロセスでは CNAME が自動的に取得され、カスタム ドメインからブログを提供できます。

Github が CNAME を管理する方法について詳しくは、ドキュメントをご覧ください。

プロジェクトの構造

• _articles - ブログ投稿のマークダウン ファイル。
• _works - ポートフォリオのマークダウン ファイル。
• app
  • assets - 画像、フォントなど、HTML ファイルによってインポートされるファイル。
  • public - publishスクリプトによって生成された HTML ファイル。 serverおよびdistディレクトリはこのディレクトリに基づいています。このディレクトリ下のファイルを直接変更しないでください。
    • article - _articlesディレクトリから変換された HTML ファイル。
    • work - _worksディレクトリから変換された HTML ファイル。
  • styles - HTML ファイルによってインポートされる CSS ソース コード。
  • static - robots.txt 、 sitemap.xml 、SEO ファイルなど、 buildスクリプトによってコンパイルされない静的ファイル。 buildスクリプトは、このディレクトリの下にあるすべてのファイルをdistディレクトリにコピーします。
  • templates - EJS テンプレート ファイル。 publishスクリプトは、このディレクトリ内のテンプレートを HTML ファイルに変換します。
• dist - buildスクリプトによってコンパイルされたファイル。 startスクリプトはこのディレクトリに基づいてローカル サーバーを開き、 deployスクリプトはこのディレクトリに基づいて Web サイトを GitHub ページにデプロイします。このディレクトリ下のファイルを直接変更しないでください。
• services - publishスクリプトを実装するソース コード。
  • classes
  • models
• tools - さまざまな npm スクリプトを実装するソース コード。

利用可能なスクリプト

npm start

http://localhost:8080/ でリッスンするローカル開発サーバーを開始します。

npm run publish

テンプレートを HTML ファイルに変換します。

$ npm run publish article

すべての記事を変換します。

$ npm run publish works

すべての作品を変換します。

$ npm run publish article 5

IDが5の記事を変換します。

$ npm run publish work 3

idが3の作品を変換します。

$ npm run publish page

すべてのページを変換します。

npm run watch

ファイルが変更されるたびに、 templatesディレクトリ内のテンプレート ファイル、 stylesディレクトリ内の css ファイル、および_articlesディレクトリ内のマークダウン ファイルを自動的に再構築します。

npm run build

パーセル バンドラーを使用してファイルをビルドします。

npm run deploy

ファイルをビルドしてデプロイします。

ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています。詳細については、LICENSE ファイルを参照してください。