handmade blog
v1.3.1
✍️
ハンドメイドブログ
この文書を別の言語で読んでください: ?? ?? ?? ?? ?? ?? ??
ハンドメイド ブログは、ブログをすぐに始めたい人のための軽量の静的ブログ ジェネレーターです。ブログ投稿の記事タイプのドキュメント、ポートフォリオの作品タイプのドキュメント、コードのハイライト、KaTeX 構文、脚注などをサポートしています。
モバイルのarticle/0.html
デスクトップ上のarticle/0.html
ファイルリストの上にある「このテンプレートを使用」ボタンをクリックして、新しいリポジトリを作成します。 github.io ドメインを使用する場合は、リポジトリに{YOUR_ID}.github.ioという名前を付ける必要があります。 (例: betty-grof.github.io ) 「すべてのブランチを含める」オプションを忘れずに有効にしてください。
リポジトリの [設定] タブをクリックし、GitHub Pages のソース ブランチをgh-pagesブランチに設定します。 GitHub Pages はgh-pagesブランチに基づいて Web サイトをホストします。数分以内にhttps://{YOUR_ID}.github.io/経由で Web サイトにアクセスできるようになります。
リポジトリのクローンを作成し、ノード パッケージをインストールします。
$ 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ナビゲーションのタイトルなどのテキストをカスタマイズし( 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 npm startスクリプトを実行して、 http://localhost:8080/でリッスンするローカル サーバーを起動します。ローカルサーバーはdistディレクトリに基づいています。
$ npm run build
$ npm start
作業ディレクトリ内の変更をコミットしてリモート リポジトリにプッシュします。
$ git add ./app/templates/navigations.ejs
$ git commit -m " Customize the blog title and subtitle "
$ git push origin master Web サイトをホストする準備ができたら、 deployスクリプトを実行します。このスクリプトは、ローカル ファイルをdistディレクトリに構築し、 distディレクトリ内のファイルのみを含むgh-pagesブランチにプッシュします。 GitHub Pages は、 gh-pagesブランチに基づいて Web サイトをhttps://{YOUR_ID}.github.io/で自動的にホストします。
$ npm run deploynpm run watch実行して変更をリアルタイムで追跡します。npm start実行してローカルサーバーを起動します。 ( npm run watchバックグラウンド、他のタブ、または他のセッションで実行されている必要があります。)app/templates 、 app/styles 、および_articlesディレクトリ内のファイルに変更を加えるたびに、自動的にビルドされます。_articlesまたは_worksディレクトリにドキュメントを書き込みます。npm run publish articleまたはnpm run publish work script を実行して、マークダウン ドキュメントを HTML に変換します。npm startスクリプトを使用して、ローカル サーバー上で変換されたドキュメントをプレビューします。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 - ポートフォリオのマークダウン ファイル。appassets - 画像、フォントなど、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スクリプトを実装するソース コード。classesmodelstools - さまざまな npm スクリプトを実装するソース コード。 npm starthttp://localhost:8080/ でリッスンするローカル開発サーバーを開始します。
npm run publishテンプレートを HTML ファイルに変換します。
$ npm run publish articleすべての記事を変換します。
$ npm run publish worksすべての作品を変換します。
$ npm run publish article 5IDが5の記事を変換します。
$ npm run publish work 3idが3の作品を変換します。
$ npm run publish pageすべてのページを変換します。
npm run watchファイルが変更されるたびに、 templatesディレクトリ内のテンプレート ファイル、 stylesディレクトリ内の css ファイル、および_articlesディレクトリ内のマークダウン ファイルを自動的に再構築します。
npm run buildパーセル バンドラーを使用してファイルをビルドします。
npm run deployファイルをビルドしてデプロイします。
このプロジェクトは MIT ライセンスに基づいてライセンスされています。詳細については、LICENSE ファイルを参照してください。
