Generate static GitHub Pages without exposing environment variables, API keys, etc.
Docker allows us to configure ruby, Jekyll, and it's associated requirements once, then run or deploy the resulting container anywhere, in a platform agnostic fashion. This provides an easily replicable environment, instantly capable of the following workflows out of the box:
- Local development.
- Building the static site.
- Deploying it to GitHub Pages.
- Install Docker for your Operating System.
- (Windows, Linux) Install Docker Compose
NOTE: Only Windows and Linux host systems require a separate installation!
- On GitHub, fork this repo. Consider using the GitHub settings to rename it for your project!
- Clone the fork to your local machine.
- In Terminal, navigate to the repo directory on your local machine.
-
Generate a new GitHub Token.
-
Add your secrets to your
.env
file. If.env
does not yet exist in your project directory, the below command will create it automatically. Lets add the required secret,JEKYLL_GITHUB_TOKEN
:echo 'JEKYLL_GITHUB_TOKEN=[REPLACE_WITH_TOKEN]' >> .env
Using
0jcdahcl66mvmyahj68xngnug0db19y2xvdm1zlb
as an example:echo 'JEKYLL_GITHUB_TOKEN=0jcdahcl66mvmyahj68xngnug0db19y2xvdm1zlb' >> .env
-
Add additional secrets by running this line in your project directory:
echo 'DEMO_VAR=super secret value' >> .env
-
Once you've finished entering secrets, edit
_config.yml
, and replace the repository name with your own. For example:repository: droxey/droxey.github.io
-
Save
_config.yml
--- your project is now fully configured for development!
-
Start the Container to Begin Development:
In Terminal, run the following command in the project root to start Jekyll:
docker-compose up
Once the server starts, simply visit http://localhost:4000 in your browser. Live reload is enabled in this container, so any changes made as you develop will instantly reflect in your browser.
-
Stop the Container to Conclude Development:
In Terminal, run the following command in the project root to stop the Jekyll server:
docker-compose down
-
Add all changes to git:
git add .
-
Commit them and supply a handy message:
git commit -m 'Latest updates to my portfolio. Added navbar.'
-
Push Local Changes to
gh-pages
:git push origin gh-pages
-
Anytime you've made changes, repeat these steps.