I lied, you can’t host Ghost for free, at least can’t use it properly. But there is a workaround, I will discuss it now.
From the very beginning, I had a crush on Ghost. Not only I found it’s UI is cool, but also many of my favourite bloggers use this. If you want to use Ghost you have to pay 5 per month.
Being poor, I couldn’t afford those. But fortunately, I came to know about Jekyll and GitLab Pages. There is a Jekyll theme available called Jasper2 which is made based on Ghost UI. It works almost same as Ghost. Jekyll is a static site generator based on Ruby. And GitLab Pages lets us host static websites for free, they even support custom domain and SSL. Perfect for my blog! Lets get started.
At first we will host the Jasper2 with GitLab Pages.
Create ruby development environment (skip if you have already)
I am showing the MacOS version here, if you use windows please google for the procedure.
Install Home-brew If you don’t have it yet.
/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
brew install ruby
Don’t forget to add the brew ruby path to your shell config :
export PATH=/usr/local/opt/ruby/bin:$PATH
Then relaunch your terminal and check your updated Ruby setup:
ruby -v
You will see your ruby version if it is installed properly.
gem install jekyll bundler
Clone Jasper2 repository and move the origin to Gitlab.
Jasper2 was hosted in GitHub, in this tutorial we will use Gitlab, so we need to change the origin. First create a project in gitlab. Make it public or private doesn’t matter. Then execute the following commands.
git clone https://github.com/jekyller/jasper2.git
cd jasper2
git remote remove origin
git remote add origin https://yourGitlabUserName:yourGitlabPassword@gitlab.com/saadnoor123/yourGitlabProjectName.git
git add .
git commit -m "Moved to Gitlab"
git push -u origin master
Create a gitlab-ci.yml file.
.gitlab-ci.yml
is Gitlab project’s configuration file. Gitlab will host your site from a directory named public
, so we have to put all our static html/css/js files to that folder.
Create a file named .gitlab-ci.yml
on the root of your project. And paste the following code there.
image: ruby:2.3
cache:
paths:
- vendor/
before_script:
- bundle install --path vendor
pages:
stage: deploy
script:
- bundle exec jekyll build -d public
artifacts:
paths:
- public
only:
- master
test:
stage: test
script:
- bundle exec jekyll build -d test
artifacts:
paths:
- test
except:
- master
When you will push to master branch, it will build and deploy the static codes to your GitLab Pages site.
Update _config.yml
file
In Jekyll _config.yml
stores all the necessary informations regarding your sites. Please update them with your preference. Don’t forget to update baseurl and url to
baseurl: "/"
url: "/"
If you don’t want to use custom domain, keep the baseUrl same as your project name.
Now, push and wait for some time. Your site will be live initially at: https://yourGitlabUserName.gitlab.io/yourProjectName
Now that we hosted our site, we want to add custom domain to our site.
new domain
. You will see a page like this:
create New Domain
button you will see a page like this
gitlab-pages-verification-code=yourGitlabVerificationCode
portion.Now go to your Hosting provider, I used Namecheap, in their advanced DNS option:
@
and value gitlab-pages-verification-code=yourGitlabVerificationCode
@
and value 35.185.44.232
(This is GitLab Pages’ IP address)unverified
label, domain will be verified.And Boom! That’s it. If you follow these steps properly, you have successfully set up your site with custom domain and SSL. If you face any difficulty or have any feedback regarding this tutorial, let me know by email, saadnoors9@gmail.com
NOTE: For running jasper2 locally, go to commandline and navigate to jasper2 directory, then write
bundle exec jekyll serve
Subscribe to our newsletter and stay updated.