DEV Community

Cover image for GithubActions powered  blog and online CV

GithubActions powered blog and online CV

Serhii Vasylenko
Hi there! πŸ‘‹ I am an engineer from Ukraine. I like astronomy and everything related to DevOps. I thrive on developing great product offerings, great people, and great teams.
・2 min read

My contribution to GitHub Actions Hackathon on DEV

This project is built on four powerful technologies:

  • Jekyll - used as a static website generator
  • Pandoc - used as a rendering tool (markdown > html) for CV
  • Github Pages - used as a hosting
  • GithubActions - used for build and deploy automation

My Workflow

There are two workflows: one for the blog (website), and one for the CV (cv).
They both use the following Github Actions:

In both workflows, the build job is performed within a container, which is different per workflow: Ruby for the blog and Pandoc for CV.

Here is how the build job looks like for the blog:

    runs-on: ubuntu-latest
      image: ruby:2.6.4
        --workdir /src 
      - name: Checkout
        uses: actions/checkout@v2 

      - name: Build blog
        run: |
          bundle install
          bundle exec jekyll build --verbose --destination _site

      - name: Upload artifacts
        uses: actions/upload-artifact@v2
          name: _site
          path: _site
Enter fullscreen mode Exit fullscreen mode

As you can see, I run the steps within the Ruby container. This simplifies things related to file permissions and directory mounting because checkout is made inside the container.

The deploy step is performed via shell run command for now, for better clearness (can be replaced to third-party action or custom-made one): it makes a commit to gh-pages branch which is configured for Github Pages.

    if: github.ref == 'refs/heads/master'
    needs: build
    runs-on: ubuntu-latest
      - name: Checkout gh-pages branch
        uses: actions/checkout@v2
          ref: 'gh-pages'

      - name: Get the build artifact
        uses: actions/download-artifact@v2
          name: _site
          path: ./

      - name: Deploy (push) to gh-pages
        run: |
          git config "$GITHUB_ACTOR"
          git config "${GITHUB_ACTOR}"
          git add -A 
          git commit -a -m "Updated Website"
          git remote set-url origin "https://x-access-token:${{ secrets.DEPLOY_TOKEN }}"
          git push --force-with-lease origin gh-pages
Enter fullscreen mode Exit fullscreen mode

Submission Category:

DIY Deployments

Yaml File or Link to Code

Here is a link to repository with workflows (see /.github/workflows directory)

GitHub logo vasylenko /

A source code of my personal website powered by Jekyll

Personal blog powered by Jekyll

Slightly modified Jekyll theme (see links below) with automatic build and deployment to Github Pages.

Build and deploy are automated by Github Actions – .github/workflows/website.yaml.

Once website is built, its file go to gh-pages branch which is configured for Github Pages.

Markdown CV with rendering to HTML

Base directory – cv.

"source code" for the CV is a Markdown file which is rendered by pandoc utility. Font, layout and other customizations are made in .css file, as ususally. There are no customizations to renderigng.

Build and deploy are automated by Github Actions – .github/workflows/cv.yaml.

Deploy goes to the same gh-pages branch.

Technologies used:

Additional Resources / Info

Discussion (2)

sidrsingh profile image

Well done. Can you tell me in the Deploy section how do I push to a specific folder (say 'data') present inside gh-pages branch ?

svasylenko profile image
Serhii Vasylenko Author

Thank you for asking @sidrsingh !

Think simple: how would you do it manually from your computer?

Since the "Deploy" step automates your actions with git mainly, you need to have your 'data' folder already created before the git add command.

You can either pass the "data" folder inside artifact or add some action in the Depoy step that creates this folder for you and copies the unpacked artifacts into it.