Blog articles written by the DISID Team. Come Learn and Share.
DISID’s blog pages are based on Jekyll with GitHub Pages.
The articles are written in AsciiDoc, generated by the Jekyll AsciiDoc Quickstart plugin and deployed on Github Pages.
You can use Git command-line to write, commit, and automatically publish blog posts.
If you’re just getting started, then follow the directions immediately below. It’s actually pretty easy.
The repository requires the following structure to work correctly:
-
master, for markup sources and blog configuration.
-
gh-pages, for the generated static content produced by Travis CI with Jekyll AsciiDoc Quickstart plugin.
A member of Communication team give you write access to our DISID blog repository by adding you as collaborator.
For this, you should open an issue on DISID blog repository. Type a title and description for your issue:
- Title
-
Publication request collaborator
- Message
-
I would like to be a contributor of DISID blog to be able to publish some articles.
Apply Collaborator label to the issue.
As soon as posible, a member of Communication team give you write permissions to repository.
From within your DISID blog directory, create and clone the master branch
git clone https://github.com/DISID/disid-blog
To add a new post, simply navigate to the _drafts/ directory and create a new file with this structure YYYY-MM-DD-Title-Of-Your-New-Post.adoc.
If you fail to name the file in this structure, Jekyll will ignore that post in the final compilation.
Open up your newly created file, and fill out the Front matter YAML. This enables Jekyll to properly recognize the post and get essential information regarding the post, like its categories and tags.
DISID blog theme uses variable post templates for articles, quotation, video, photo and status updates (type option).
The lines in between the triple dashes (-) provide the essential information about that post to the AsciiDoc parser during Jekyll compilation.
Open up the post in your favorite text editor.
Edit the URLs and other values in the YAML front matter as appropriate. This should be self-explanatory.
A new blog post should have the following structure to utilise the themes functions:
---
layout: post
type: photo # !Important if you want to show a thumbnail on home page
photo: some-image.jpg # In case you do not want the featured image to display on the front page
title: "Some Title" # Title of the post
description: Some description # Description of the post, used for Facebook Opengraph & Twitter
headline: Some headline # Will appear in bold letters on top of the post
modified: YYYY-MM-DD # Date
tags:
- spring
- springroo
- gvnix
- how-to
---
Content goes hereThe theme supports for large feature images that span the full-width of the screen, and is meant for text heavy blog posts (or articles).
This image appears at page’s header, and, if your post is a photo type, the image will be displayed as thumbnail on summary at home too.
A good rule of thumb is to keep feature images nice and wide. An image cropped around around 1024 x 768 pixels will keep file size down with an acceptable resolution for most devices. If you want to serve these images responsively I’d suggest looking at Picturefill or Adaptive Images.
---
imagefeature: YYYY-MM-DD-Title-Of-Your-New-Post/feature-image-cover-filename.png
#display header image on post page
image:
thumb: YYYY-MM-DD-Title-Of-Your-New-Post/thumbnail-image.png
#keep it square 200x200 px is good
#display summary image on index page
---When creating or editing a blog post, you can easily add images. Here’s how to add an image using AsciiDoc format.
To include an image on its own line (i.e., a block image), use the image prefix in front of the file name and square brackets after it:
image::save.png[]
If you want to include an image inline, use the image: prefix instead (notice there is only one colon):
Press the image:save.png[] button.
You can also give the image an id, a title (i.e., caption), set its dimensions (i.e., width and height) and make it a link:
[[img-save]] .Save Project image::save.png[Save, 300, 200]
The title of a block image is displayed underneath the image when rendered.
The layout make the assumption that the feature images live in the images folder. To add a feature image to a post just include the filename in the front matter like so.
We recommend you create a new folder with the same name of your post YYYY-MM-DD-Title-Of-Your-New-Post.png to locate the images easily.
Images are resolved relative to the value of the imagesdir page attribute, which defaults to an empty value. The imagesdir attribute can be an absolute path, relative path or base URL.
You should use the imagesdir attribute to avoid hard coding the path to your images in your post.
To add your images directory on a post, customize with your data in your post’s Front Matter YAML and add image in content with site variable and page variable:
---
imagedir: /images/YYYY-MM-DD-Title-Of-Your-New-Post/
---
Content goes here
image::{{ site.url }}{{ page.imagedir }}save.png[Save]DISID blog it’s a Jekyll site with several languages: English and Spanish. It’s necessary to assign category and language to post on YAML data.
The default language preference is English, you should add:
---
lang: en # Define language post
categories:
- en # Define language post
- how-to # You can add other categories
---If your post is in Spanish version, you will add:
---
lang: es # Define language post
categories:
- es # Define language post
- cómo funciona # You can add other categories
---The Spanish posts should go to /posts/es/ and the English ones to /posts/en, with Jekyll, each folder is a category, so in this case we have two English and Spanish. And we will use these categories to filter the posts in the index file of each one of the sections.
|
Important
|
To add a Spanish version post, simply navigate to the _drafts/ directory and create a new file with prefix following this structure To add a image related to this Spanish version post, simply navigate to the _images/ directory and create a new file with prefix following this structure |
DISID blog posts embeds a corporative signature after the main content block.
To add your signature on a post, make sure your post contains the following contents and customizes with your data in your post’s Front Matter YAML:
---
author:
name: Your Name
image: profile picture URL
jobdescription: Job Description
twitter: twitter-profile
---Check out the sample posts in _posts folder to see examples for quotation posts, status posts, pulling in feature images wrap, assigning categories and tags, and other YAML data.
You can see the list of sample posts at Samples page.
This sample posts are posts customized as
---
category: Sample
tags: [sample]
samples: true
---This values let us publish hidden posts and lets you see sample posts in Github Pages.
Besides, you have available a adoc template in _drafts folder.
After you’ve added one or few posts and Once you’re satisified with your edits, commit your changes and push the master up to origin remote.
git commit -m "Added my post" git push origin master git push
Your post will be added at _drafts folder and it’s not published yet.
|
Important
|
Check out the AsciiDoc format
Before commit your blog post, it’s time to render the AsciiDoc document to HTML and confirms you’ve entered the correct syntax for an inline or block element in your post. We recommend selecting an editor that supports syntax highlighting for AsciiDoc. Previewing the output of the document while editing can be helpful. Asciidoctor provides a command line tool and a Ruby API for converting AsciiDoc documents to HTML 5 and other custom output formats. To use Asciidoctor to generate an HTML document, type asciidoctor followed by your document’s name on the command line: $ asciidoctor sample.adoc Besides, here’s an overview of the different ways to setup live preview of AsciiDoc. |
All you have to do is add your post at _drafts folder, and our team of content curators will review and pick up your content and it will be move it to _posts folder.
For this, you should open an issue on DISID blog repository. Type a title and description for your issue:
- Title
-
Post Review
- Message
-
I’ve just uploading the post
YYYY-MM-DD-Title-Of-Your-New-Post.adocto drafts folder and is ready to be published. You can add a summary of your post also.
We will review your post content and respond as soon as possible.
After that, you should be able to see your post at http:https://blog.disid.com/ and you will be notified by email.
Assuming you’re already within your disid-blog clone directory, and you’ve already checked out the master branch, follow these simple directions to view your site locally:
Install Jekyll if you have not already
gem install bundler bundle
Use the --watch flag to pick up changes to files as you make them, allowing you a nice edit-and-refresh workflow.
bundle exec jekyll serve --watch
Use the --drafts flag to show drafts posts at _drafts folder not published yet.
bundle exec jekyll serve --drafts
|
Important
|
Because the url is set explicitly within _config.yml file, you’ll need to fully-qualify the URL to view your pages. Vhen running Jekyll locally will be http:https://localhost:4000/.
|
-
The Jekyll AsciiDoc Quickstart is a leg-up in starting your own website hosted on Github with content based in AsciiDoc.
-
HMFAYSAL OMEGA is a minimalist, beautiful, responsive theme for Jekyll designed for engineers as well as writers who want their content to take front and center. HMFAYSAL OMEGA is the most complete and complex theme designed for Jekyll to date, ready to handle whatever you throw at it. It was built – by Engineer slash Mathematician Hossain Mohd Faysal.
Copyright © 2015 DISID CORPORATION S.L.
DISID blog content is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. Based on a work at blog.disid.com.
Follow our articles on official blog http:https://blog.disid.com.
If you use Twitter, you are encouraged to follow @disid_corp and we appreciate your mentions.