Jekyll Static Sites on the Digital App Platform
This tutorial describes how to host your Jekyll static site (including plugins) on the new Digital Ocean App Platform.
- A github or gitlab account
- A Digital Ocean Account (can be created for free)
- Your Jekyll site has a successful build on your local machine as well as your Ruby version in your GemFile
Create your App
The first step in creating the app, is to access the Digital Ocean App Platform. Once your account you are logged into the platform, click on the "Create App" button as seen below.
Step 1: Select your source
The App platform allows sources of Github or Gitlab. Choose one, and then let Digital Ocean have permission to access your repository. Make sure "auto deploy" is selected if you want your site updated whenever your commit code to your repository. Click "next" to move to the next step.
Step 2: Configure Your app
In this section there are 3 steps you must ensure to hae a Jekyll site on the static platform:
- Ensure static site is selected (it may default to web service)
- Ensure your build command matches is correct. If its not, click the "edit" button to make your changes, then "close" to save it.
- Make sure you update your output directory (where the files will be built).
Now, click "next" to move to the next step.
Step 3: Name Your Static Site
This is the name you will see on your dashboard, as well as becoming a part of what your live url will be (before a custom domain). Choose one, then click next.
Step 4: Finalize and Launch
Starter plan should be selected by default, as its a static site. Make sure to select "Starter plan" if there is a different default selected. Finally click "Launch Starter App".
The page should now look similar to below that displays the current build status, as well as other information. Click "view logs" in the build status message to see live output of your app being build.
Fixing a Build Error
If your not building on a Linux machine, you may run into the error message about being on an unsupported platform.
In the terminal, you will need to add the linux platform to your gemlock file as indicated in the instructions from the server log output. From my output, I needed to run the below command. The image below shows the terminal output.
bundle lock --add-platform x86_64-linux
Be sure to commit your changes to your remote repository. Your site should automatically start trying to build again. If you have "auto deploy" turned off, yu will need to manual;y deploy from the app platform interface.
Click the "view logs" from the build message alert again to see the status. If it fails, (for example missing packages), be sure to add them to your bundle, then recommit your files.
When you have a successful build, the interface will update with your live link. Click your digital ocean domain to have a look (if will be under your app name). For example, my link is: https://jekyll-site-cick5.ondigitalocean.app/
Configure your Custom Domain
For this step, you will need to click the "settings" tab, then scroll down to the domains section and click the edit button.
An "add" button will appear under your current site. Click the add button to proceed to the next step.
You will be brought to a screen titled "Add Domain". Fill in your domain name, and select how whether you want digital ocean to manage, or to add a CNAME (in my instance DNS is selected). For more information the differences check out: How to Manage Domains in App Platform.
You should first add your DNS or CNAME settings to your domain manager first, then wait 48-72 hours. Once it's been 72 hours, come back to the Add Domain page then click the button "Add Domain". Once you click that button, the page will redirect back to your settings in the domain section. You should now see "pending" for your custom domain. It will take about 24 hours for the app platform to configure the rest.
Once it successfully configures, you will see a success message and log details (if you click view more).
Once you see "Active" as your status, repeat the steps to add "www" as a sub-domain (as seen below):
That's it! You should now just need to wait for the domain to update.