|
1 | | -# Simply Grey |
2 | | -Simply Grey is a nice, easy on the eyes Jekyll theme that makes great use of grey colours. |
| 1 | +# Jekyll-Mono |
3 | 2 |
|
4 | | - |
| 3 | +**Jekyll-Mono** is a simple and elegant GitHub Profile cum Blog theme based on Barry Clark's [Jekyll-Now](https://github.com/barryclark/jekyll-now). It's a result of my attempt to learn **Jekyll** and create a minimalistic theme to put up my CV alongwith some blog posts. |
5 | 4 |
|
6 | | -## Installation |
7 | | -There are a few requirements to using and installing the Simply Grey theme. |
| 5 | +It is crafted with 💙 by [Akshay Agarwal](https://github.com/AkshayAgarwal007). |
8 | 6 |
|
9 | | -1. You must have Jekyll installed. If you have no done this, do it by executing the following code. |
10 | | -`gem install jekyll` |
| 7 | + |
11 | 8 |
|
12 | | -2. You must have git installed. If you do not have this, install it on your system by using your package manager. For example, in Debian, type |
13 | | -`sudo apt-get install git` |
14 | 9 |
|
15 | | -Once you have done this, installation is pretty easy. |
| 10 | +## What is Jekyll? |
16 | 11 |
|
17 | | -Simply clone the repository |
| 12 | +It is a static site generator. It takes your content written in Markdown, passes it through your templates and spits it out as a complete static website, ready to be served using GitHub pages for free. |
| 13 | +Because your entire blog is static it serves and perform faster. It consumes less web resources namely memory and I/O. |
18 | 14 |
|
19 | | -`git clone https://github.com/liamsymonds/simplygrey-jekyll.git` |
| 15 | +## Getting Started |
20 | 16 |
|
21 | | -and serve the blog up so people can see it |
| 17 | +Let's quickly set up your new blog in a matter of minutes. |
22 | 18 |
|
23 | | -`cd simplygrey-jekyll; jekyll serve` |
| 19 | +### Fork this repository |
24 | 20 |
|
25 | | -## Configuring SimplyGrey |
26 | | -The SimplyGrey theme is actually very easy to configure. |
| 21 | +Hit the “Fork” button in the top-right corner of the repository to fork a copy of this theme to your GitHub account and rename it to **yourusername.github.io** and then visit https://yourusername.github.io and you'll be able to see your newly created blog using Jekyll-Mono. |
27 | 22 |
|
28 | | -### Adding more links to the navigation bar |
29 | | -1. Open the _config.yml file |
30 | | -2. Add some more values to the urls hash like the others that already exist there. |
| 23 | +### Customise Jekyll-Mono |
31 | 24 |
|
32 | | -### Changing the site name |
33 | | -1. Open the _config.yml file |
34 | | -2. Change the site name |
| 25 | +So now your blog is live with its default settings. Let's customise it now. |
35 | 26 |
|
36 | | -### Changing the logo/picture image |
37 | | -1. Drop a 75x75 image into the img directory. |
| 27 | +Edit the _config.yml and enter your site name and description. You can easily turn on Google Analytics tracking, Disqus commenting and cool loking social icons here too. |
| 28 | + |
| 29 | +Jekyll-Mono also comes with the option of setting up the color scheme of your blog. You can do this by editing _variables.scss that lies inside the _sass folder. You can change the main theme color by simply replacing the current hex color value of `$mono` with the one of your choice. A few main theme sample colors are included in there as comments. Apart from the main theme color you can also change the header link color, navbar hover color, hyperlink color as well as the color of the various headings. |
| 30 | + |
| 31 | +A look at the customisations you can do with _variable.scss |
| 32 | + |
| 33 | +``` |
| 34 | +// Main theme colors |
| 35 | +// Some cool main theme colors(violet:#8476ad;blue:#5cacee;red:#ff7373,#ff6f69;green:#6acf64,#2ddbb3;orange:#ffa268) |
| 36 | +
|
| 37 | +$mono-color:#8476ad; // main theme color(header, links, footer icons, buttons, post-title) |
| 38 | +$hl-color: $darkGray; // header link color (author name and posted on date) for blog post meta |
| 39 | +$navbar-hover-color:$gray; // navbar hover color (site name and navbar links hover color) |
| 40 | +$link-color: $darkerGray; // normal hyperlink color other than the ones above. |
| 41 | +
|
| 42 | +
|
| 43 | +// Heading colors |
| 44 | +// You can play around with these too! |
| 45 | +$h1-color: $mono-color; |
| 46 | +$h2-color: $mono-color; |
| 47 | +$h3-color: $darkerGray; |
| 48 | +$h4-color: $gray; |
| 49 | +``` |
| 50 | +Have a look at Jekyll-Mono with four different main theme colors. |
| 51 | + |
| 52 | + |
| 53 | + |
| 54 | +Finally you need to set up your avatar. Pick up your avatar, resize it to 220x220px simply using paint or any editor of your choice and upload it to the images folder. Now open _variables.scss, you'll see something like this `$avatar: "/images/avatar.jpg";`. Here change the avatar.jpg to what you have uploaded just now. |
| 55 | + |
| 56 | + |
| 57 | +### Start Blogging |
| 58 | + |
| 59 | +Publish your first blog post by editing /_posts/2016-03-06-Eternal-Lorem-Ipsum.md. [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) might come in handy while writing your blog posts in Markdown. If you are not comfortable with writing in Markdown you can use [Prose](http://prose.io/) for writing your blog posts. [This](https://developmentseed.org/blog/2012/june/25/prose-a-content-editor-for-github/s) will help you in setting up prose. |
| 60 | + |
| 61 | + |
| 62 | + |
| 63 | +To create a post just click on create new file button in /_posts/. Create a new file with the following naming convention: **year-month-day-title.md**. Also make sure to include the front-matter at the top of each new blog post. |
| 64 | + |
| 65 | +You can see the front matter at the top of /_posts/2016-03-06-Eternal-Lorem-Ipsum.md. It looks something like this. You have to change the title and author according to your post. The layout will remain the same. |
| 66 | + |
| 67 | +``` |
| 68 | +--- |
| 69 | +layout: post |
| 70 | +title: The Eternal Lorem Ipsum Placeholder Text Here |
| 71 | +author: Author Name |
| 72 | +--- |
| 73 | +
|
| 74 | +``` |
| 75 | + |
| 76 | +### About and Projects Page |
| 77 | + |
| 78 | +In the parent folder you'll find about.md and projects.md. These are templates for helping you to set up your biodata/CV and projects that will be available at yourusername.github.io/about and yourusername.github.io/projects respectively. Again you can edit it in Markdown on GitHub or using Prose as per your choice. |
| 79 | + |
| 80 | + |
| 81 | +## Demo |
| 82 | + |
| 83 | +You can see the live demo of this theme at http://akshayagarwal007.github.io/Jekyll-Mono/ |
| 84 | + |
| 85 | +## Local Development |
| 86 | + |
| 87 | +For setting up your development environment you can follow the official Jekyll [Documentation](https://jekyllrb.com/docs/installation/). It's a little bit complicated for Windows users. Let's see how it's done on windows: |
| 88 | + |
| 89 | +1. **Install Chocolatey**. **[Chocolatey](https://chocolatey.org)** is a package manager for windows. It's awesome. |
| 90 | + Open a command propmt with administrator access. Paste this. Hit Enter and restart the command prompt. |
| 91 | + |
| 92 | + ``` |
| 93 | + @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin |
| 94 | + |
| 95 | + ``` |
| 96 | + |
| 97 | +2. **Install Ruby** : In your command prompt type `choco install ruby -y`. |
| 98 | + Hit Enter. After installation restart the cmd with administrator privileges. |
| 99 | + |
| 100 | +3. **Install Jekyll/Sass (plug-ins used by GitHub Pages)**: `gem install github-pages` |
| 101 | + |
| 102 | +4. **Clone your fork of Jekyll-Mono** `git clone https://github.com/yourusername/yourusername.github.io.git` |
| 103 | + |
| 104 | +5. **Serve the site** by `jekyll serve`. It regenerates itself after any changes has been made. |
| 105 | + |
| 106 | +6. **View your site** at http://127.0.0.1:4000/ |
| 107 | + |
| 108 | +7. If you make any changes to _config.yml you'll need to rebuild the site using `jekyll build` and then again a `jekyll serve` to serve it. You'll need to do a rebuild only if you want to see the changes locally, else you can simply commit your changes and push them to your GitHub repo, GitHub pages will rebuild and serve your website. |
| 109 | + |
| 110 | +## Credits |
| 111 | + |
| 112 | +* [Barry Clark](https://github.com/barryclark) for creating [Jekyll-Now](https://github.com/barryclark/jekyll-now) on which this theme is based. |
| 113 | +* [Manoela Ilic](https://github.com/crnacura) of Codrops for writing awesome articles on web design. |
| 114 | +* [David Miller](https://github.com/davidtmiller) of Blackrock Digital for making awesome open source themes. |
| 115 | +* [Jekyll](https://github.com/jekyll/jekyll) - Thanks to its creator and contributors. |
| 116 | +* [Font-Awesome](http://fontawesome.io) - Thanks to its creator and contributors. |
| 117 | + |
| 118 | +## Contributing |
| 119 | + |
| 120 | +* Found a bug? Report it on GitHub [Issues](https://github.com/AkshayAgarwal007/Jekyll-Mono/issues) and include a code sample. |
| 121 | +* [Fork](https://github.com/AkshayAgarwal007/Jekyll-Mono/fork) the repository and start your own blog using it and let me know about it so that I can include a reference to it here. Probably the best way you can contribute :) |
| 122 | +* If you find anything that's wrong or want to talk to me about anything related to this theme or want to contribute in any way, please feel free to [mail me ](mailto:[email protected]). |
| 123 | + |
| 124 | +## License |
| 125 | + |
| 126 | +Jekyll-Mono is licensed under [MIT](https://github.com/AkshayAgarwal007/Jekyll-Mono/blob/master/LICENSE.txt). |
| 127 | + |
| 128 | + |
| 129 | + |
| 130 | + |
| 131 | + |
| 132 | + |
| 133 | + |
| 134 | + |
| 135 | + |
| 136 | + |
| 137 | + |
0 commit comments