由Jekyll驱动的静态博客,参考Material Design设计风格,使用Material Components Web框架。
并非通用博客模版,而是以我自己的喜好量身定制,由随笔、转载、诗文、看剧4个板块组成,整体采用平淡极简风格,在文字、色彩和动画之外不添加多余元素。可作为Material Design
个人站参考,但不建议直接套用,尚未进行模版化改造。
主页:
看剧:
博文以Markdown
格式撰写,由Jekyll
转换为HTML
网页:
关联标签:
工程由Webpack
和Jekyll
组成,Webpack
用于生成网站所需的Javascript
和CSS
资源,Jekyll
则用来将Markdown
文章转换为HTML
网页,生成可部署的静态站点。
切换到内部Webpack
工程目录,编译生成JS
、CSS
:
# 进入内部 Webpack 工程
cd npm
# 安装所需依赖
npm install
# 执行编译,在 npm/dist/ 目录下生成 JS、CSS
npm run build
网站部署时这些资源文件被托管在阿里云OSS
上以提高中国大陆的访问速度,在_includes/head.html
中可以看到对它们的引用。
调试时需要将_includes/configure.html
中的debug
参数设为true
,Jekyll
会在<header></header>
中引用本地资源。进入debug
模式后JS
日志也会输出到浏览器Console
中。
<!-- _includes/configure.html -->
<!-- 设置 debug 为 true,将会使用本地资源 -->
{% assign debug = true %}
安装Jekyll,启动本地服务:
# 安装 Jekyll,macOS 使用 Homebrew
brew install jekyll
# 安装 config.yml 中定义的 Jekyll 插件
bundle install
# 启动 Jekyll 服务,自动调用浏览器进入博客
# http://localhost:4000
bundle exec jekyll serve -l -o --trace --draft
Jekyll
会在_site/
目录下生成静态网站,并serve
到本地4000
端口。
http://localhost:4000
jekyll serve
是以开发模式生成站点,一些插件比如jekyll-sitemap
并不会使用_config.yml
中配置的域名,如果要生成可部署站点需执行jekyll build
。
bundle exec jekyll build --trace
调试完成后,把Webpack
生成的新JS
和CSS
文件上传到OSS
中,然后在_includes/configure.html
中关闭debug
模式即可使用这些远程资源。
<!-- _includes/configure.html -->
<!-- 设置 debug 为 false -->
{% assign debug = false %}
工程push
到自己的repository
,GitHub Pages
会自动执行Jekyll
的build
操作,生成静态网站。
git push
静候数秒或数分钟,取决于Pages
执行速度,完成后网页就会更新。
博客代码以GPL-3.0
协议开源,但_posts目录下的原创文章以CC BY-NC-ND 4.0协议保留著作权,对其中的摄影照片保留版权,未经允许不可作商业用途。