本博客系统通过构建工具生成纯静态
的博客网站,借助GitHub Pages
,你可以在5分钟内免费拥有个人博客。 它具有以下特点
Fork
按钮,并创建自己的仓库。Actions
,启用workflows。Settings
,找到Pages配置,在Build and deployment 选项中选择GitHub Actions
.你可以通过根目录下的webinfo.json
,对博客基础信息进行配置,如下所示:
{ "Name": "Niltor Blog", // 博客名称,显示在主页顶部导航 "Description": "🗽 for freedom",// 说明,显示在主页顶部中间 "AuthorName": "Ater", // 作者名称,显示在博客列表 "BaseHref": "/blazor-blog/" // 子目录 }
当你使用Github Page或使用IIS子应用部署时,需要调整BaseHref
。通常是你的项目名称或子目录名。
Important
注意,BaseHref
尾部的/
是必需的。
如果你配置了自定义域名,并且没有使用子目录,请将BaseHref设置为/
。
修改后提交代码,GitHub会触发Action自动构建。
请使用任何你习惯的markdown编辑器编写博客,唯一的要求是将博客内容放到Content
目录下。你可以在该目录下创建多级目录。
你只需要正常提交代码即可,github action会自动构建并最终发布你的博客,发布成功后可打开您的 GitHub Page 查看。
如果你不使用Github Page,那么你也可以轻松的部署到其他服务。核心的步骤只需要两步。
BuildSite
项目是用来将markdown转换成html的,请在根目录执行:
dotnet run --project .\Lib\BuildSite\ .\Content .\WebApp Production
在根目录下,你会看到WebApp
目录。
将WebApp
中的所有文件复制到你的服务器即可。
Tip
根目录下的publishToLocal.ps1
脚本可以自动完成构建和生成的操作,最终内容将在根目录下WebApp
目录中。
如果你使用自动化部署,可参考.github/workflows中的脚本。
fork之后,你将拥有所有的自定义权限,因为所有的源代码都已经在你自己的仓库中。
核心项目为BuildSite
,该项目是用来生成数据文件的,其中包括将markdown文件转换成html文件。
你需要准备以下内容以便进行二次开发
BuildSite
项目WebApp
目录下执行http-server
,然后在浏览器中打开http://127.0.0.1:8080
。dotnet run --project ./Lib/BuildSite ./Content ./WebApp
,以生成最新的静态内容。如果你使用tailwindcss
,请在WebApp
下执行npx tailwindcss -o ./css/app.css --watch
主页内容模板位于Lib\BuildSite\template\index.html.tpl
,其中包括以下变量:
模板变量 | 说明 |
---|---|
@{BaseUrl} | 基础路径 |
@{Name} | 博客名称 |
@{Description} | 描述 |
@{blogList} | 博客列表 |
@{siderbar} | 侧边栏内容:分类和存档 |
你可以按照自己的想法修改主页的布局和样式。
Note
请注意标签中的id
属性,js
脚本将依赖于这些id标识,如果你修改了这些标识,同时要修改js
脚本。
主页内容包括博客的搜索和分类筛选功能,其功能代码在WebApp\js\index.js
中。
关于博客列表和分类列表的自定义,你可以参考BuildSite
项目中HtmlBuilder.cs
文件中的GenBlogListHtml
和GenSiderBar
方法。
后续我们会提供更灵活的自定义方式。
博客页内容模板位于Lib\BuildSite\template\blog.html.tpl
,其中包括以下变量:
模板变量 | 说明 |
---|---|
@{BaseUrl} | 基础路径 |
@{Title} | 页面标题 |
@{content} | 博客内容 |
@{toc} | 二级标题TOC |
关于博客展示页的内容,你可以通过WebApp/css/markdown.css
来修改样式,以及WebApp/js/markdown.js
来定义逻辑。
本项目使用ColorCode
来格式化markdown中的代码内容,ColorCode
使用正则来匹配代码内容。如果你需要对代码高亮进行定义,你需要:
ColorCode.Core/Compilation/Languages
目录下找到相应的语言定义,如果不存在,你可以添加新的语言支持。ColorCode.Core/Languages.cs
中加载该语言。