My Personal Website - lanihuang.com
Mobile overlay menu
I want to learn web development, so I build myself a website. It is built with Jekyll and GitHub Pages.
Since GitHub Pages natively support Jekyll, it can build the site for me once I push to the site's publishing branch. However, GitHub Pages only support a limited number of Jekyll plugins. As a DIY person, I chose to work around this by generating the site locally and then push the static files to my GitHub Pages site. This way, I can use any Jekyll plugins as I want. Also, I get to test the site locally before publishing it.
For this to work, I have to maintain two branches in my GitHub repo, one for editing, and the other for GitHub Pages. This sounds like a pain, but luckily I found this and learned to create a Rakefile to run those tedious tasks for me.
As I develop this site, I came across so many inconvenience that led me to learn to use a build system, Gulp. After some googling and watching some YouTube videos, I can streamline the build process by automatically adding vendor prefixes, reloading browser when files are changed and etc.
- Site generator: Jekyll
- Web hosting: GitHub Pages
- Font: Raleway served by Google Fonts
- Masonry plugin: Isotope
- Hide navbar on scroll: Headroom.js
- Full screen overlay menu
- Website statistics: Google Analytics
- Build system: Gulp
Gulp plugins used:
- browser-sync watch for file change and reload browser
- gulp-postcss pipe CSS through several processors
- gulp-sass compile Sass files
- autoprefixer add vendor prefixes
- gulp-concat combine several files into one file