How To Host Ghost For Free

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 29permonth,orasitsanopensourceproject,youcanhostitDigitaloceansdroplet,startsfrom29 per month, or as it’s an open source project, you can host it Digitalocean’s droplet, starts from5 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.

  1. 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.

  2. Install Jekyll and bundler gems
    in your command line, type - gem install jekyll bundler
  3. 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
  4. 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.

  5. 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.

  1. Go to Project Settings, then Pages. Here click the button named new domain. You will see a page like this: Don’t forget to mark automatic certificate management using LE if you don’t have any SSL for your domain.
  2. After clicking create New Domain button you will see a page like this From the verification status copy the gitlab-pages-verification-code=yourGitlabVerificationCode portion.
  3. Now go to your Hosting provider, I used Namecheap, in their advanced DNS option:

    • create a TXT record. Put Host @ and value gitlab-pages-verification-code=yourGitlabVerificationCode
    • Then create an A record and put host @ and value 35.185.44.232 (This is GitLab Pages’ IP address)
  4. Now click the refresh icon of 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

Get The Best Of All Hands Delivered To Your Inbox

Subscribe to our newsletter and stay updated.