Test, build, and deploy your apps from anywhere, the same way!
- Overview
- Why?
- Prerequisites
- Usage
- 3musketeers website development
- Contributing
- References
- Stargazers over time
- License
The 3 Musketeers is a pattern for developing software in a repeatable and consistent manner. It leverages Make as an orchestration tool to test, build, run, and deploy applications using Docker and Docker Compose. The Make and Docker/Compose commands for each application are maintained as part of the application’s source code and are invoked in the same way whether run locally or on a CI/CD server.
Run the same commands no matter where you are: Linux, MacOS, Windows, CI/CD tools that supports Docker like GitHub Actions, Travis CI, CircleCI, and GitLab CI.
Take control of languages, versions, and tools you need, and version source control your pipelines with your preferred VCS like GitHub and GitLab
Test your code and pipelines locally before your CI/CD tool runs it. Feel confident that if it works locally, it will work in your CI/CD server.
Create the two following files:
# file: docker-compose.yml
version: '3'
services:
alpine:
image: alpine# file: Makefile
# echo calls Compose to run the command "echo 'Hello, World!'" in a Docker container
echo:
docker-compose run --rm alpine echo 'Hello, World!'Then simply echo "Hello, World!" with the following command:
$ make echoFor more information, visit 3musketeers.io.
This repository is the 3musketeers.io website built with VitePress. This section explains how to develop, test, and deploy using the 3 Musketeers.
# create a .env file
$ make envfile ENVFILE=env.example
# install dependencies
$ make deps
# start vitepress server for local development
$ make dev
# wait till the message 'vite v2.5.3 dev server running at' appears
# access the website in your browser at http://localhost:8080/
# \<ctrl-c\> to stop
# build static site
$ make build
# serve static site for local development
$ make serveDev
# access the website in your browser at http://localhost:8080/
# \<ctrl-c\> to stop
# serve static website (headless)
$ make serve
# test static website
$ make test
# prune
$ make prune
# contributing? make sure the following command runs successfully
$ make allThe 3 Musketeers website is deployed to Netlify. This section shows how to create site, deploy, and delete using Netlify CLI. This is handy for previewing new changes.
This section creates a new empty Netlify site. Ensure the .env file contains the access token.
# All the following commands will be run inside a container
$ make shell
# Disable telemetry (optional)
$ yarn run netlify --telemetry-disable
# Create new Netlify blank site
$ yarn run netlify sites:create --disable-linking
# Answer the questions regarding the team and site name
# Site name can be something like 3musketeers-preview-{random 5 digit numbers}
Site Created
Admin URL: https://app.netlify.com/sites/site-name
URL: https://site-name.netlify.app
Site ID: site-id
# You can always get back that information
$ yarn run netlify sites:list
# Copy the ID to .env
# Exit the container
$ exitThis section deploys the website to an existing netlify site. Ensure the .env file contains the right site ID and access token.
# Build the website
$ make build
# Deploy to netlify
$ make deploy
# Test the website
$ curl https://site-name.netlify.app
# Clean up directory
$ make pruneThis section deletes a netlify site. Ensure the .env file contains the right site ID and access token.
# All the following commands will be run inside a container
$ make shell
# Disable telemetry (optional)
$ yarn run netlify --telemetry-disable
# Delete the site (optional)
$ yarn run netlify sites:delete
# Exit the container
$ exitGitHub Actions is used to test PRs and deploy changes made to main branch to Netlify.
- A dedicated Netlify personal access token has been created for Github Actions
- Environment variables required for deploying to Netlify are set as secrets for GitHub Actions
- The GitHub Actions workflows follow the 3 Musketeers pattern so it is a good real life example
- 3 Musketeers logo
- Created by me with Procreate and Vectornator
- Neat tools used are offset path and mask objects
- 2048px by 2048px SVG image
- Images are in folder
docs/public/img
- Created by me with Procreate and Vectornator
- Favicon
- Source image is an exported png format of the logo
- Use the website favicon.io
- The generated content is in
docs/public/favicon_io - File docs/public/favicon.io is a copy of the file in
docs/public/favicon_io- By default, browsers searches for /favicon.io
- HTML
linktags have been set in file/docs/.vitepress/config.js
- Social media preview
- This is for displaying preview of the website on Twitter, Facebook, GitHub, etc
- Created a new vector image 1280x640px with the scale down logo at the center
- The size is suggested by GitHub in General settings
- According to artegence article, the ideal image that works on different social platforms
- Is 1200x630px
- Has the logo (630x630) centered
- Use png format (very high quality and transparency)
- Use jpg format (high quality and very good size compression)
- HTML
metatags have been set in file/docs/.vitepress/config.js - The social image is also set in the general settings of the repository
- Diagrams
- draw.io is used to generate diagrams
- All diagrams are in the file
diagrams.drawio
- README badges
Thanks goes to these wonderful people.
The 3 Musketeers is an open source project and contributions are greatly appreciated.
Please visit https://3musketeers.io/guide/contributing.html for more information.
- Docker
- Compose
- Make
- VitePress
- Netlify
- GitHub Actions
- Vectornator
- Procreate
- favicon.io
- draw.io
- Preparing a perfect image for the og:image tag
