This project is the code and configuration for my personal bliki website (blog + wiki), which gives me the power to write articles that evolve over time.
This uses an interesting mix of technology - aptly to power my technology bliki:
- Jekyll (& its related technologies in Ruby)
- Bootstrap & jQuery
- NodeJS and friends (Bower, Gulp etc.)
The reason for me to start a Github powered website had multiple reasons:
- Flexibility of a blog & wiki as described by Martin Fowler. I used Blogger since 2006 for my blog, but I always wanted more power - especially when dealing with technology topics.
- Power and flexibility to control the look and feel of the content published.
- Learning and apply some frontend technologies such as Bootstrap, Bower & Gulp.
- Free - as in free speech as well as free as in free beer. Being in Github does not require me to have a web hosting provider. The even better part is that it is free for anyone to see and learn.
1. Install latest version of ruby and devkit - from http://rubyinstaller.org/downloads/.
gem install jekyll
gem install bundler
gem install github-pages
gem install jemoji
gem install wdmbundle installPsst! You may encounter issues while installing Ruby gems (especially on Windows), since some of them require native extensions. In that case please follow Ruby documentation.
4. Make changes and run Jekyll locally to confirm that the command executes properly. Do not focus on the website output yet. More information on Jekyll on its official documentation at https://jekyllrb.com/docs/home/.
bundle exec jekyll serve5. No doubt - you will have to also setup NodeJS and its friends. Install the latest NodeJS from https://nodejs.org/.
6. Now install Gulp as described in https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md.
npm install
bower installThis is where NodeJS and friends come to play. Gulp has been used to automate most of the tasks needed for building and running the website locally.
The idea here is that Gulp would be used to perform most of the workflow including compilation of SASS, minification, uglification, linting etc. Jekyll will be used to assemble the pages to HTML output.
If you need to update the web dependencies, update the versions on bower.json and run bower again. See the Bower documentation for more information.
bower install --forceThe normal website edit - whether it is changing the code or design, or whether it is adding new content, gulp tasks have been confugured for these as well, which will also run the Jekyll, so that you can exactly see how it will look when hosted on Github pages.
gulp serveThe above command will process the JavaScript files by concatinating, uglifying and linting them; start Jekyll server; and lint the generated HTML files as well!
Note: Because of the way gulp workflow is setup, any file which requires gulp to perform a workflow (eg wiring dependencies etc), should reside in src folder, while others can be directly put under app.
Simply running gulp will do all the above tasks, but without running the Jekyll server itself, and instead preparing for committing the changes to Github.
Once the gulp command has successfully executed. The resulting state of the repository can be committed and pushed to Github for instant publishing.
Please use the issues tracker on Github to report any issues on this project.
- Github Pages documentation - https://pages.github.com/
- Inspiration on Jekyll with Bootstrap - http://jekyllbootstrap.com/
- Import your old & busted site or blog for use with Jekyll - http://import.jekyllrb.com/
- Learn about liquid syntax (templating language used in Jekyll) - https://shopify.github.io/liquid/
- Nice & elaborates tutorial on setting up Jekyll website on Github pages - http://digitaldrummerj.me//blogging-on-github-part-1-Getting-Started/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent