2021-10-11
BlogManagement, Python, WebsiteWithPython
本サイトのディレクトリ構造 (WebsiteWithPython #2)
本ホームページの構成を紹介する. pythonで作る静的高速サイト というシリーズで執筆している.
テンプレートのcodesはGitHub: Website with Pythonで公開している.
#2は本サイトのディレクトリ構造について記す.
目次
本サイトのディレクトリ構造 (WebsiteWithPython #2)目次サイト構造全体像全ディレクトリの詳細記事テンプレート _draftdataディレクトリ_generate-icon.command_width2000.commandindex-article-meta.jsonindex-article.md変換ディレクトリ convertconvert_settings.jsonarticleListsMaker.pytemplates/templates.htmlconvert_to_index.pyconvert_all.py_convert_all.commandoutディレクトリ公開ディレクトリ public概要もう少し詳細版publicsitemap.xmlads.txtcssdata/favicon.icoaboutmeblogblog/nestTestblog2続く
サイト構造
全体像
テンプレートのcodesはGitHub: Website with Pythonで公開している.
.├── README.md├── _draft├── convert└── public
_draft: 記事のテンプレートファイルの置き場所convert: 変換用のpythonファイル, サイト内のヘッダー等のtemlateのhtml等の置き場所public: 公開する場所. サーバの設定などでここを公開用のディレクトリとすれば, この直下がトップページとなる
全ディレクトリの詳細
xxxxxxxxxx.├── README.md├── _draft│ └── _temp│ ├── data│ │ ├── _generate-icon.command│ │ └── _width2000.command│ ├── index-article-meta.json│ └── index-article.md├── convert│ ├── __pycache__│ │ ├── articleListsMaker.cpython-39.pyc│ │ └── convert_to_index.cpython-39.pyc│ ├── _convert_all.command│ ├── articleListsMaker.py│ ├── convert_all.py│ ├── convert_settings.json│ ├── convert_to_index.py│ ├── out│ │ ├── articleLists_byKeywords_blog-nestTest.xlsx│ │ ├── articleLists_byKeywords_blog.xlsx│ │ ├── articleLists_byKeywords_blog2.xlsx│ │ ├── articleLists_byYear_blog-nestTest.xlsx│ │ ├── articleLists_byYear_blog.xlsx│ │ ├── articleLists_byYear_blog2.xlsx│ │ ├── articleLists_topPage_blog-nestTest.md│ │ ├── articleLists_topPage_blog.md│ │ └── articleLists_topPage_blog2.md│ └── templates│ └── templates.html└── public├── aboutme│ ├── index-article-meta.json│ ├── index-article.html│ ├── index-article.md│ └── index.html├── ads.txt├── blog│ ├── 2018│ │ ├── test1│ │ │ ├── data│ │ │ ├── index-article-meta.json│ │ │ ├── index-article.html│ │ │ ├── index-article.md│ │ │ └── index.html│ │ └── test2│ │ ├── data│ │ ├── index-article-meta.json│ │ ├── index-article.html│ │ ├── index-article.md│ │ └── index.html│ ├── 2021│ │ ├── test3│ │ │ ├── data│ │ │ ├── index-article-meta.json│ │ │ ├── index-article.html│ │ │ ├── index-article.md│ │ │ └── index.html│ │ └── test4│ │ ├── data│ │ ├── index-article-meta.json│ │ ├── index-article.html│ │ ├── index-article.md│ │ └── index.html│ ├── index-article-meta.json│ ├── index-article.html│ ├── index-article.md│ ├── index.html│ └── nestTest│ ├── 2019│ │ ├── test11│ │ │ ├── data│ │ │ ├── index-article-meta.json│ │ │ ├── index-article.html│ │ │ ├── index-article.md│ │ │ └── index.html│ │ └── test12│ │ ├── data│ │ ├── index-article-meta.json│ │ ├── index-article.html│ │ ├── index-article.md│ │ └── index.html│ ├── 2021│ │ ├── test13│ │ │ ├── data│ │ │ ├── index-article-meta.json│ │ │ ├── index-article.html│ │ │ ├── index-article.md│ │ │ └── index.html│ │ └── test14│ │ ├── data│ │ ├── index-article-meta.json│ │ ├── index-article.html│ │ ├── index-article.md│ │ └── index.html│ ├── index-article-meta.json│ ├── index-article.html│ ├── index-article.md│ └── index.html├── blog2│ ├── 2020│ │ ├── test21│ │ │ ├── data│ │ │ ├── index-article-meta.json│ │ │ ├── index-article.html│ │ │ ├── index-article.md│ │ │ └── index.html│ │ └── test22│ │ ├── data│ │ ├── index-article-meta.json│ │ ├── index-article.html│ │ ├── index-article.md│ │ └── index.html│ ├── 2021│ │ ├── test23│ │ │ ├── data│ │ │ ├── index-article-meta.json│ │ │ ├── index-article.html│ │ │ ├── index-article.md│ │ │ └── index.html│ │ └── test24│ │ ├── data│ │ ├── index-article-meta.json│ │ ├── index-article.html│ │ ├── index-article.md│ │ └── index.html│ ├── index-article-meta.json│ ├── index-article.html│ ├── index-article.md│ └── index.html├── css│ ├── ad.css│ ├── footer.css│ ├── github-partnumber.css│ ├── header.css│ ├── main.css│ ├── prev-next.css│ ├── related-articles.css│ ├── sidemenu.css│ └── typora-stylesheet.css├── data│ └── favicon.ico├── index-article-meta.json├── index-article.html├── index-article.md├── index.html└── sitemap.xml
記事テンプレート _draft
xxxxxxxxxx├── _draft│ └── _temp│ ├── data│ │ ├── _generate-icon.command│ │ └── _width2000.command│ ├── index-article-meta.json│ └── index-article.md
dataディレクトリ
記事内の画像等を格納するディレクトリ
_generate-icon.command
iconを作成するcommandファイル
詳細は コマンドでテキスト入り画像を作る に記載している.
x
set -CEuo pipefailSCRIPT_DIR=$(cd $(dirname $0) && pwd)cd ${SCRIPT_DIR}
label='日本語\n\nMake an image with text\nby using ImageMagick'background_color='#000000'icon_sizeW=512# icon_ratio=1.777icon_ratio=`echo "scale=5; 16 / 9" | bc`border=20font='.Hiragino-Kaku-Gothic-Interface-W4'color='#FFFFFF'
file_name="icon.png"sizeW=`echo "scale=0; $icon_sizeW - $border * 2" | bc`sizeH=`echo "scale=0; $icon_sizeW / $icon_ratio - $border * 2" | bc`
convert \ -size "${sizeW}x${sizeH}" -background $background_color \ -fill $color -font $font -gravity center label:"$label" \ -bordercolor $color -border $border \ $file_name
_width2000.command
同ディレクトリにある画像のwidthを2000pxに統一するcommandファイル.
xxxxxxxxxx
set -CEuo pipefailSCRIPT_DIR=$(cd $(dirname $0) && pwd)#echo ${SCRIPT_DIR}cd ${SCRIPT_DIR}
# pwdsips --resampleWidth 2000 *
# exit2000という箇所を変えれば他のpxサイズに統一できる
index-article-meta.json
xxxxxxxxxx{ "published-datetime": "2021-01-01_00-00-00", "update-datetime": "2021-09-01_01-23-45", "description": "", "keywords": ""}記事のメタ情報に関するjsonファイル.
published-datetime: 記事の公開日時upadte-datetime: 記事の更新日時description: 記事の概要を書く. 記事のhtmlのhead内のdescriptionに書き込まれる.keywords: 記事のキーワードを書く. 記事のhtmlのhead内のkeywordsに書き込まれる.
index-article.md
xxxxxxxxxx# Title## Index[toc]## How to ...## Video## References記事の本編. typoraで執筆し, stylesheet付きでindex-article.htmlというファイルにexportする.
変換ディレクトリ convert
xxxxxxxxxx├── convert│ ├── __pycache__│ │ ├── articleListsMaker.cpython-39.pyc│ │ └── convert_to_index.cpython-39.pyc│ ├── _convert_all.command│ ├── articleListsMaker.py│ ├── convert_all.py│ ├── convert_settings.json│ ├── convert_to_index.py│ ├── out│ │ ├── articleLists_byKeywords_blog-nestTest.xlsx│ │ ├── articleLists_byKeywords_blog.xlsx│ │ ├── articleLists_byKeywords_blog2.xlsx│ │ ├── articleLists_byYear_blog-nestTest.xlsx│ │ ├── articleLists_byYear_blog.xlsx│ │ ├── articleLists_byYear_blog2.xlsx│ │ ├── articleLists_topPage_blog-nestTest.md│ │ ├── articleLists_topPage_blog.md│ │ └── articleLists_topPage_blog2.md│ └── templates│ └── templates.html
convert_settings.json
xxxxxxxxxx{ "rootDir": "../public", "publicDirNames": ["aboutme","blog","blog/nestTest","blog2"], "articleTopNames": ["blog","blog/nestTest","blog2"], "articleYears": { "blog": ["2018","2021"], "blog/nestTest": ["2019","2021"], "blog2": ["2020","2021"] }}ウェブサイトの設定についてのjson
articleListsMaker.py
ウェブサイトの記事リストを作成するpythonファイル
templates/templates.html
ウェブサイトの元となるテンプレートhtml
xxxxxxxxxx<!-- ==========division-line_1234567890_abcdefghijklmn====================================================== -->という文字列で分けられている.
この順番に沿って, convert_to_index.py 内で読み込むため, 必要があれば適宜連動して修正する必要がある.
- Author部分
- Google AdSenseの情報部分
は適宜自分の情報に置き換える必要がある.
convert_to_index.py
1つページを変換するpythonファイル
xxxxxxxxxxpython3 convert_to_index.py [root-dir] [article-top-name] [article-dir] [isAdsNecessary(1/0)] [isSideMenuNecessary(1/0)] [isArticleDatetimeNecessary(1/0)]xxxxxxxxxxpython3 convert_to_index.py ../public blog ../public/blog/2021/hogehoge 0 1 1xxxxxxxxxxpython3 convert_to_index.py ../public none ../public 0 0 1のように使用する.
templates.html内の分割文字列によって
xxxxxxxxxx tmplHtmlStart = templatesStrList[0] tmplHead = templatesStrList[1] tmplBodyStart = templatesStrList[2] tmplHeaderStart = templatesStrList[3] tmplHeaderSiteNav = templatesStrList[4] tmplHeaderArticleNavStart = templatesStrList[5] tmplHeaderArticleNavEnd = templatesStrList[6] tmplHeaderEnd = templatesStrList[7] tmplMainStart = templatesStrList[8] tmplArticleStart = templatesStrList[9] tmplArticleInfo = templatesStrList[10] tmplTyporaStart = templatesStrList[11] tmplTyporaEnd = templatesStrList[12] tmplPrevNext = templatesStrList[13] tmplRelatedArticles = templatesStrList[14] tmplArticleEnd = templatesStrList[15] tmplSideMenuStart = templatesStrList[16] tmplSideMenuMainStart = templatesStrList[17] tmplSideMenuIndexStart = templatesStrList[18] tmplSideMenuIndexEnd = templatesStrList[19] tmplSideMenuForm = templatesStrList[20] tmplAdSide = templatesStrList[21] tmplSideMenuMainEnd = templatesStrList[22] tmplSideMenuEnd = templatesStrList[23] tmplMainEnd = templatesStrList[24] tmplAdMain = templatesStrList[25] tmplFooterStart = templatesStrList[26] tmplFooterMain = templatesStrList[27] tmplAdSearch = templatesStrList[28] tmplFooterEnd = templatesStrList[29] tmplBodyEnd = templatesStrList[30] tmplHtmlEnd = templatesStrList[31]として内部に処理される.
templates.htmlでの修正に応じて適宜変更する必要がある.
convert_all.py
全てのページを更新し, sitemapを作成するpythonファイル
xxxxxxxxxxpython3 convert_all.pyのように使用する.
_convert_all.command
ダブルクリックするだけで convert_all.py を実行するcommandファイル
xxxxxxxxxx
set -CEuo pipefailSCRIPT_DIR=$(cd $(dirname $0) && pwd)#echo ${SCRIPT_DIR}cd ${SCRIPT_DIR}
python3 convert_all.py
# exit
outディレクトリ
記事情報がまとめられたエクセルファイルが出力される場所.
articleListsMaker.pyによって作成され,
convert_all.pyで読み込んで使用する.
公開ディレクトリ public
概要
xxxxxxxxxx└── public├── aboutme├── ads.txt├── blog│ └── nestTest├── blog2├── css├── data│ └── favicon.ico├── index.html└── sitemap.xml
もう少し詳細版
xxxxxxxxxx└── public├── aboutme│ └── index.html├── ads.txt├── blog│ ├── 2018│ │ ├── test1│ │ │ └── index.html│ │ └── test2│ │ └── index.html│ ├── 2021│ │ ├── test3│ │ │ └── index.html│ │ └── test4│ │ └── index.html│ ├── index.html│ └── nestTest│ ├── 2019│ │ ├── test11│ │ │ └── index.html│ │ └── test12│ │ └── index.html│ ├── 2021│ │ ├── test13│ │ │ └── index.html│ │ └── test14│ │ └── index.html│ └── index.html├── blog2│ ├── 2020│ │ ├── test21│ │ │ └── index.html│ │ └── test22│ │ └── index.html│ ├── 2021│ │ ├── test23│ │ │ └── index.html│ │ └── test24│ │ └── index.html│ └── index.html├── css│ ├── ad.css│ ├── footer.css│ ├── github-partnumber.css│ ├── header.css│ ├── main.css│ ├── prev-next.css│ ├── related-articles.css│ ├── sidemenu.css│ └── typora-stylesheet.css├── data│ └── favicon.ico├── index.html└── sitemap.xml
public
サイトのトップディレクトリ
ads.txt
Google AdSense用のファイル
css
サイトで利用しているcss集
xxxxxxxxxx├── css│ ├── ad.css│ ├── footer.css│ ├── github-partnumber.css│ ├── header.css│ ├── main.css│ ├── prev-next.css│ ├── related-articles.css│ ├── sidemenu.css│ └── typora-stylesheet.css
data/favicon.ico
xxxxxxxxxx├── data│ └── favicon.ico
サイトのfaviconファイル
aboutme
xxxxxxxxxx├── aboutme│ └── index.html
固定ページの例: 自己紹介
blog
xxxxxxxxxx├── blog│ ├── 2018│ │ ├── test1│ │ │ └── index.html│ │ └── test2│ │ └── index.html│ ├── 2021│ │ ├── test3│ │ │ └── index.html│ │ └── test4│ │ └── index.html│ ├── index.html
記事ディレクトリの例1. blogディレクトリ配下に記事執筆年のディレクトリ(2018, 2021など) の直下に各記事ディレクトリを置いていく.
blog/nestTest
xxxxxxxxxx├── blog│ :│ └── nestTest│ ├── 2019│ │ ├── test11│ │ │ └── index.html│ │ └── test12│ │ └── index.html│ ├── 2021│ │ ├── test13│ │ │ └── index.html│ │ └── test14│ │ └── index.html│ └── index.html
記事ディレクトリの例2.
blog/nestTestのようにネストしたディレクトリに記事ディレクトリを作成できる.
blog2
xxxxxxxxxx├── blog2│ ├── 2020│ │ ├── test21│ │ │ └── index.html│ │ └── test22│ │ └── index.html│ ├── 2021│ │ ├── test23│ │ │ └── index.html│ │ └── test24│ │ └── index.html│ └── index.html
記事ディレクトリの例3. 記事ディレクトリは複数作成可能.
続く
次回はもう少し細かい内容を書いていく予定...?
