DEV Community

Cover image for GithubActions powered blog and online CV
Serhii Vasylenko
Serhii Vasylenko

Posted on

GithubActions powered blog and online CV

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:

jobs:
  build:
    runs-on: ubuntu-latest
    container:
      image: ruby:2.6.4
      options: 
        --workdir /src 
    steps:
      - 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
        with: 
          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.

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

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

      - name: Deploy (push) to gh-pages
        run: |
          git config user.name "$GITHUB_ACTOR"
          git config user.email "${GITHUB_ACTOR}@bots.github.com"
          git add -A 
          git commit -a -m "Updated Website"
          git remote set-url origin "https://x-access-token:${{ secrets.DEPLOY_TOKEN }}@github.com/vasylenko/serhii.vasylenko.info.git"
          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 / devdosvid.blog

A source code of my personal website powered by Hugo

Personal blog powered by Hugo

💰 Zero-cost (but it still takes your time, though) hosting and CI/CD with GitHub and free CloudFlare CDN for the fast content delivery and better compression.

👨‍💻 Static website generator — Hugo

📝 Blog theme: PaperMod used as Git submodule

⚙️ CI/CD: GitHub Actions (see my workflow for example)

🌎 Free account at CloudFlare for CDN

Hugo and PaperMod theme customization:

Additional Resources / Info

https://jekyllrb.com
https://pandoc.org

Discussion (2)

Collapse
sidrsingh profile image
sid-r-singh

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 ?

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