handmade blog

✍️

手工博客

以另一种语言阅读此文档： ?? ?? ?? ?? ?? ?? ??

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分支托管您的网站。几分钟后您就可以通过https://{YOUR_ID}.github.io/访问该网站。

   

   

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. 如果您准备好托管网站，请运行deploy脚本。该脚本将本地文件构建到dist目录并将其推送到仅包含dist目录中的文件的gh-pages分支。 GitHub Pages 将自动基于gh-pages分支将您的网站托管在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脚本将 Markdown 文档转换为 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 script 以发布修改后的登录页面，并使用npm start脚本在本地服务器上预览更改。

$ npm run build
$ npm start

如果您准备好部署，请运行npm run deploy脚本。您不仅可以更改登录页面，还可以像这样更改任何页面。 （您可能需要了解项目结构。）

添加自定义域

在根目录中创建 CNAME 文件。构建过程将自动为您获取 CNAME，您可以从自定义域提供博客服务。

要了解有关 Github 如何管理 CNAME 的更多信息，请查看文档

项目结构

• _articles - 博客文章的 Markdown 文件。
• _works - 作品集的 Markdown 文件。
• app
  • assets - HTML 文件要导入的任何文件，例如图像、字体等。
  • public - 由publish脚本生成的 HTML 文件。 server和dist目录都是基于这个目录的。不要直接更改该目录下的文件。
    • article - 从_articles目录转换的 HTML 文件。
    • work - 从_works目录转换的 HTML 文件。
  • styles - 由 HTML 文件导入的 CSS 源代码。
  • static - 任何未由build脚本编译的静态文件，例如robots.txt 、 sitemap.xml或 SEO 文件。 build脚本将该目录下的所有文件复制到dist目录中。
  • templates - EJS 模板文件。 publish脚本将此目录下的模板转换为 HTML 文件。
• dist - 由build脚本编译的文件。 start脚本根据该目录打开本地服务器， deploy脚本根据该目录将网站部署到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目录中的 markdown 文件。

npm run build

使用包裹捆绑器构建文件。

npm run deploy

构建并部署文件。

执照

该项目根据 MIT 许可证获得许可 - 有关详细信息，请参阅许可证文件。