I'm using this theme like my personal profile but if you want to use to you, please, feel free!

http://raphaelaugustos.com.br/

If you're completely new to Jekyll, I recommend checking out the documentation at http://jekyllrb.com or there's a tutorial by Smashing Magazine.

I'll post step by step how to set up this theme coming soon in the section Blog.

Fork the repo, and then clone it so you've got the code locally.

$ git clone https://github.com/<your githubname>/raugustos.git
$ cd raugustos
$ gem install jekyll # If you don't have jekyll installed
$ rm -rf _site && jekyll server

The _config.yml located in the root of the raugustos directory contains all of the configuration details for the Jekyll site. The defaults are:

# Website settings
title: "Raphael Augustos"
description: "Augustos blog,use Jekyll and github pages."
keywords: "Raphael,Augustos,blog,Jekyll,github,gh-pages"

baseurl: "/"
url: "http://www.raphaelaugustos.com"
# url: "http://127.0.0.1:4000"

# author
author:
  name: 'Augustos'
  first_name: 'Augustos'
  last_name: 'Ferreira'
  email: '[email protected]'
  facebook_username: 'raphael augustos'
  github_username: 'raugustos'
  head_img: 'static/img/landing/augustos.jpg'


# landing page
landing:
  home: 'Home'
  about: 'About'
  career: 'Career'
  skills: 'Skills'
  projects: 'Project'
  blog: 'Blog'
  contact: 'Link'

# my projects
project:
  saplatform:
    name: 'Saplatform'
    url: '/raugustos/saplatform'
    img: 'static/img/landing/saplatform.jpg'
  augustos:
    name: 'augustos'
    url: '/raugustos/raugustos'
    img: 'static/img/landing/jekyll.jpg'


# blog index
index:
  home: 'Home'
  python: 'Python'
  linux: 'Linux'
  html: 'HTML'
  database: 'Database'
  mac: 'Mac'
  life: 'Life'

...

Then, start the Jekyll Server. I always like to give the --watch option so it updates the generated HTML when I make changes.

$ jekyll serve --watch

Now you can navigate to localhost:4000 in your browser to see the site.

You can host your Jekyll site for free with Github Pages. Click here for more information.

A configuration tweak if you're using a gh-pages sub-folder

In addition to your github-username.github.io repo that maps to the root url, you can serve up sites by using a gh-pages branch for other repos so they're available at github-username.github.io/repo-name.

This will require you to modify the _config.yml like so:

# Welcome to Jekyll!

# Site settings
title: Repo Name

baseurl: "/"
url: "http://github-username.github.io"
# url: "http://127.0.0.1:4000"

# author
author:
  name: nickname
  first_name: firstname
  last_name: lastname
  email: [email protected]
  facebook_username: facebook_example
  github_username: 'github_example
  head_img: 'path/of/head/img'

# landing page
landing:
  home: landing-1
  about: landing-2
  career: landing-3
  skills: landing-4
  blog: landing-5
  contact: landing-6

# blog index
index:
  home: index-1
  python: index-2
  linux: index-3
  html: index-4
  database: index-5
  mac: index-6
  life: index-7

# blog img path
img_path: '/path/of/blog/img/'

If you start server on localhost, you can turn on # url: "http://127.0.0.1:4000".

The pagination in jekyll is not very perfect,so I use front-end web method,there is a blog about the method and you can refer to jPages.

The landing page of the blog is bilingual page,when you click national flag,the page language changes.The fllowing is how to set up bilingual page.

To add i18 support for your app you need to define what text you would like to translate. The best way to define your text is to store it in external json file. For example:

Each language you should have own json file!

en.json

{
  "website":{
    "title": "rAugustos"
  },
  "nav":{
    "home": "Home",
    "about_me": "About",
    "skills": "Skills",
    "career": "Career",
    "blog": "Blog",
    "contact": "Contact"
  }
}

pt.json

{
  "website":{
    "title": "rAugustos"
  },
  "nav":{
    "home": "Home",
    "about_me": "Sobre mim",
    "skills": "Habilidades",
    "career": "Carreira",
    "blog": "Blog",
    "contact": "Contato"
  }
}

Next you need to add html indicators in all place you want to use i18.(index.html)

<a class="navbar-brand" href="#page-top" id="i18_title"><span data-i18n="website.title">{{ site.title }}</span></a>

Next you need to initialise the i18next plugin: json files are located in static/locales folder.

$.i18n.init(
    resGetPath: 'locales/__lng__.json',
    load: 'unspecific',
    fallbackLng: false,
    lng: 'en'
}, function (t)
    $('#i18_title').i18n();
});

After that if you want to change the language you just need to add buttons and fire the i18n.setLng() function.

HTML markup

<a class="btn btn-sm set_en"><img src="{{"static/img/flags/64/United-States.png"| prepend: site.baseurl }}" height="16px" width="16px"></a>
<a class="btn btn-sm set_pt"><img src="{{"static/img/flags/64/Brazil.png"| prepend: site.baseurl }}" height="16px" width="16px"></a>

Javascript code

$('.set_en').on('click', function (){
    i18n.setLng('en', function(){

        $('#i18_title').i18n();

   });
});

$('.set_cn').on('click', function (){
    i18n.setLng('pt', function(){

        $('#i18_title').i18n();

    });
});

Link: i18next

I hope you enjoy using rAgustos. If you encounter any issues, please feel free to let me know by creating an issue. I'd love to help.

• Jekyll
• Bootstrap
• jPages
• i18next
• pixyll
• androiddevelop