Create your own blog/portofolio using these technologies, with no hosting fee!
Requirements:
- Terminal
- Check whether you have Ruby 2.1.0 or higher installed:
$ ruby -v
ruby 2.x.x
- Install Bundler:
$ gem install bundler
- Create a local repository for your Jekyll site. (Jump to step 1 if this is done)
* Install git, see [set up Git](https://help.github.com/articles/set-up-git/)
* Open terminal
* Initialize a new Git repo for your jekyll site:
$ git init <GitHubUsername>.github.io
Initialized empty Git repository in /Users/horseforce/andrehatlo.github.io/.git/
# creates a new file directory on your local computer, Initialized as a Git repo
- Then change directory to the new repository created:
$ cd <GitHubUsername>.github.io
Step 1: Install Jekyll using Bundler
- Check if you have a Gemfile in your newly created repo
$ ls
Gemfile
* If you have a Gemfile, skip to step 4.
- Open up your favorite text editor, if you need one: Atom. Then add these lines to a new file, and save.
source 'http://rubygems.org'
gem 'github-pages', group: :jekyll_plugins
Save the file as
Gemfile
, in the root directory of your local Jekyll repository. Now skip to step 5 to install Jekyll.Only if you already have a Gemfile. Open your favorite editor, mine is Atom, and add these lines to your Gemfile:
source 'https://rubygems.org'
gem 'github-pages', group: :jekyll_plugins
- Install Jekyll and other dependencies from the GitHub Pages gem by running:
$ bundle install
Fetching gem metadata from https://rubygems.org/......
Fetching version metadata from https://rubygems.org/...
Fetching dependency metadata from https://rubygems.org/..
Resolving dependencies...
Step 2: Run your Jekyll site localy
You can generate site files for a basic Jekyll template site in your local repository.
- If you don't already have a Jekyll site localy on your computer, create a Jekyll template site in a new directory:
$ bundle exec jekyll _3.3.0_ new <new-jekyll-site-repo-name>
New jekyll site installed in /Users/horseforce/<new-jekyll-site-repo-name>.
- Navigate into your new site directory and edit your Gemfile by removing the following line:
$ 'jekyll', "3.3.0"
- In the same Gemfile, delete the
#
at the beginning of this line:
$ gem "github-pages", group: :jekyll_plugins
- Initialize the directory as a Git repo
$ git init
- Connect your remote repo on GitHub to your local repo for your site.
$ git remote add origin http://github.com/<username/organization-name/your-remote-repo-name>
To edit the Jekyll site, open your jekyll local repository in an text editor. Make as much changes as you want and save them.
Preview changes locally by running a Jekyll command to build your site:
- Navigate to your site root directory:
$ cd <GithubUsername>.github.io
-
Run the following command:
$ bundle exec jekyll serve Configuration file: /Users/horseforce/andrehatlo.github.io/_config.yml Source: /Users/horseforce/andrehatlo.github.io Destination: /Users/horseforce/andrehatlo.github.io/_site Incremental build: disabled. Enable with --incremental Generating... done in 0.309 seconds. Auto-regeneration: enabled for '/Users/horseforce/my-site' Configuration file: /Users/horceforce/andrehatlo.github.io/_config.yml Server address: http://127.0.0.1:4000/ Server running... press ctrl-c to stop.
In your browser, preview your local Jekyll site at
http://localhost:4000
- Add or stage your changes:
$ git add .
- Commit it
$ git commit -m "some stuff changed"
- Push your changes to your remote repository on GitHub
$ git push -u origin master
Step 3: Make github host it
Navigate to your repository.
Which should be named in this format:
<github-username>.github.io
If your repository is called something else, we can change it at the next step.
Enter into your repository settings.
First thing you see is Repository name
, edit it so that it matches the syntax:
<github-username>.github.io
Next scroll further down in repo settings until you see GitHub Pages
@ GitHub Pages
Hopefully it should now say:
✔️ Your site is published at: http://www.andrehatlo.github.io
If not, there is possibly something wrong with your repository or github setup.
Applying a custom domain
Scroll down on the github repo settings page until you see Custom domain
under GitHub Pages
.
Fill in your domain name, and click save.
Now go to your domain hoster website and create a CNAME record that points to your repo, this can be done in the settings of your DNS records.
www.andrehatlo.com -> CNAME -> <github-username>.github.io
Now you should have your own domain hosted for free
Just keep tweaking your website and check out all the different themes out there! I will be coming with more tutorials about Jekyll in the future 😄
Top comments (0)