This content originally appeared on DEV Community and was authored by André Hatlo-Johansen
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 😄
Hope this was helpfull enough as my first blog post.
I'll try to excel as fast as possible by writing MANY MANY more! 👋 👋
This content originally appeared on DEV Community and was authored by André Hatlo-Johansen
André Hatlo-Johansen | Sciencx (2022-03-28T07:00:11+00:00) Jekyll + Github = Free hosting: Tutorial. Retrieved from https://www.scien.cx/2022/03/28/jekyll-github-free-hosting-tutorial/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.