Help with the blog
Adding a blog post
- In
macromuseum.github.io/_postscreate a.mdfile named as follow:- year-month-day (e.g. 2015-1-1 or 1212-12-12)
- your-blog-name (e.g. how-to-add-a-blog)
- The result should look like
2015-1-1-how-to-add-a-blog.md
- Make sure to add the right header to your post:
--- layout: post title: The title of my blog post (It C0uLD b3 @nyTHING!) --- - Then write your blog post in Markdown. If you need to add images, you can add the in
macromuseum.github.io/imagesand embed them as - Finally, just sync your repo and push your new blog post. It’ll magically appear!
Images:
There are (for now) three ways to add images to you post.
Normal (in text) image
This is the easiest way to embed images, they’ll just appear unformatted as you called them along the text or as a new image (if it’s a big image, it’ll be big).
Header image
This one is to add a header image to your post (recommended). The image will appear on the blog main page (like a graphical abstract). This can be done easily by adding the following just after the header:
Note that the two empty lines (before and after) are essential. You can also add some text like an catchy sentence as follow (same, empty lines are important).
This is a really catchy sentence, I can't wait to read the rest!
Resized image
An other way to add pretty picture is to have automatic resized and centered pictures (so all your pictures have the same layout). That’s also easy, just use the following:
This will automatically center your image and set the height to 200px (without transforming the ratio). You can also add a fancy quote to the image like this:
<center>My quote</center>
Note the
<center>My quote</center>
Note the straight quotations marks - essential! Finaly, you can also add a link to your picture with the original dimensions as follows:
[ "Some mouseover text" ](/images/YourNicePicture_WhateverSize.jpg)
<center>My quote</center>
So that when you click on the picture it gives you the full sized one (handy for phylogenies!).
Other tips
Draft posts:
You want to draft your post before sending it to the whole world? Super easy: instead of writing the date at the start of your markdown file, just write anything (like Someday-My-post.md). Then just replace Someday by the actual date and pouf! it’ll be posted.
Creating new pages in the upper bar menu (WARNING: can break the internet)
It’s possible to add pages to the menu (i.e. “About”, “How to post”) this way:
- duplicate one of the menu folder (such as “about” or “howto”) in
BESMacro.github.io/_site - add a
.mdfile in the root (BESMacro.github.io/) with the same name as the menu folder - be sure the start the
.mdfile with the right header--- layout: page title: The title of the new page permalink: /<menu_folder>/ --- - then add the page to the default template in the
<body><nav>:
<...>
<nav>
<a href="/">Blog</a>
<a href="/about">About</a>
<a href="/howto">How to post</a>
<a href="/legal">Legal Mumbo Jumbo</a>
<a href="/your_new_page">The page name</a>
</nav>
<...>
Note that the order of where the page is in the <nav> will be where the link to the page will actually appear.
- finaly build the website using (be sure you installed all the dependencies):
bundle exec jekyll serve
Changing some design features (WARNING: can break the internet - big time!)
_config.ymlis the yamal file that contains easy fixable details for the whole website (title, description, bottom bar buttons, etc..)_layout/contains the templates for the layout (e.g. blog posts, main page, etc…)_sass/contains the scss files (namely_variables.scssthat you should use to set the template variables)style.scssis the Jekyll css-like file (if you wanna break some things, that’s the place to go!) The savest way to play with these is to do it on your internal server usingbundle exec jekyll serve. Note however for changes in the yamal file you have to refresh the localhost each time. If you’re happy with your messing up, just sync the repo and push!