This repo contains the source code for the personal website of Carlos Matallín.
- Local
- With Docker (recommended)
The website is built on top of Jekyll, a simple content management system for static sites.
The website uses gulp tasks for development, and webpack for module bundler.
In order to use Jekyll, you will need to have Ruby installed. There are several ways to install Ruby. You need to install Bundler to install the dependencies. You'll need Node.js installed, and a package manager, such as Yarn or npm.
- Ruby
- RubyGems
- Bundler
- Node.js
- Yarn
Once you have Bundler and Yarn installed, use them to intall the dependencies:
bundle install
yarn global add gulp-cli # npm install gulp-cli -g to install with npm.
yarn # npm install to install with npm.
You should now have everything needed to run the website locally.
Docker provides a way to run applications in a container, with all its dependencies. Compose is a tool for running Docker applications.
You should have Docker and Compose properly installed on your machine.
Running the website on Docker is as simple as running docker-compose up
. This downloads the Docker image, and builds the website.
There are several tasks available to help you build and test the website. We'll run them in the Docker container, but the same tasks can be run locally.
docker-compose run --rm -e JEKYLL_ENV=development web yarn start
This will have Jekyll build the site, webpack compile the assets, run a static server to listen on port 9000 (which you can now reach at http://localhost:9000/), and watch for changes to site files. Every change will cause Jekyll to rebuild the affected files, webpack to compile the assets, and reload the page.
You can also build the website and browse through the dist files, launching a server in that folder:
docker-compose run --rm web
cd dist/
python -m SimpleHTTPServer
You can use environment variables to build the website for a different environment:
docker-compose run -e JEKYLL_ENV=staging -e NODE_ENV=production web yarn build
Tests can be launched with Jest running the following command in the terminal:
docker-compose run --rm web yarn test
Add --coverage
option to show test coverage.
Before commiting files run Prettier to format the code:
docker-compose run --rm web yarn format
Finally, JS files can be checked with ESLint to keep a consistent styleguide, running the following command in the terminal.
docker-compose run --rm web yarn lint
To update the dependencies for Bundler, and Yarn respectively you can run:
docker-compose run --rm web yarn upgrade
docker-compose run --rm web bundle update
When pushing (or merging) to the master
branch in the repository, the website is automatically deployed to https://matall.in/ via CircleCI.
CircleCI uses a config workflow very similar to the Dockerfile. Ideally we would build a CI/CD pipeline with Docker, but we can use CircleCI caching instead of Docker Layer Caching.
You can also launch a deploy to AWS S3 with the AWS CLI:
aws s3 sync --acl public-read dist/ s3://${AWS_BUCKET} --delete --exclude "*" --include "*.html" --include "*.txt" --include "*.xml" --cache-control "max-age=0, public"
aws s3 sync --acl public-read dist/ s3://${AWS_BUCKET} --delete --exclude "*" --include "*.ico" --include "*.png" --include "css/*" --include "js/*" --include "img/*" --cache-control "max-age=31536000, public" --expires $(date -d "+1 year" -u +%Y-%m-%dT%H:%M:%SZ)