Using NetlifyCMS to build a mostly static site, with easy to access content for later updating.
This page uses 11ty, which is a Jamstack and Nunjucks as a templating engine.
What this means is you can build reuseable components and pages using Nunjucks syntax, then run 11ty to build the static website to be hosted. It looks complicated, but this method allows for faster page building, as a signle component can be used across multiple pages quickly.
- Download Node.js and install it to your computer
- Clone this repo - Either download it and unzip it somewhere or clone it with git
- In a powershell or terminal navigate to the root directory of the project (Where the package.json is)
- Run
npm install - Run
npm run serve - Start coding
These steps should get you a local server running at https://localhost:8080/ that will refresh automatically whenever a file is changed and then saved in the project directory. You get to see your changes made in real time.
hint: If you aren't seeing your changes then you might have a syntax error. ctrl+c in the terminal to kill the servers, then run npm run serve again to get them started up. If there's an error you'll see it in the terminal.
If you followed the quickstart steps above, the command also started a local backend server for netlifycms. If you go to https://localhost:8080/admin you should be met with a login screen. From here you can check out the CMS. It's a bit more limited than originally expected, but it is customizeable so has a lot of potential.
NetlifyCMS and Netlify are not actually associated with each other, but hosting a netlifycms site on netlify is incredibly easy. Unfortunately, at this time a code for tucson netlify account does not exist, so this static page is being hosted on github pages. This means authentication for the CMS is broken, but the page is still hosted.
If you notice you're missing some images, see the Hosting the static page in a subdirectory section. The short version is that using npm run serve-subdir might fix your problem
"scripts": {
"build": "npx eleventy",
"watch": "npx eleventy --watch",
"serve": "concurrently --kill-others \"npx netlify-cms-proxy-server\" \"npx eleventy --serve\"",
"debug": "DEBUG=* npx eleventy",
"build-subdir": "npx eleventy --pathprefix=new-cft-website --output=new-cft-website/docs",
"serve-subdir": "npx eleventy --serve --output=new-cft-website/docs --pathprefix=new-cft-website"
},
The CMS stores media based on the configuration at /admin/config.yml
media_folder: "/new-cft-website/static/img"
The CMS keeps all posts and pagers in markdown files across the directory. The media location in the .md file will be whatever was set as the media_folder value when the CMS was used.
All this means is that if you're using the fancy CMS screens to make updates, it's going to use the value in that file so if the website is hosted in subdirectory, like on a github page without a custom domain, then you will need to find and replace the media path in each of the .md file. Other files don't have this problem because the --pathprefix option on the eleventy command takes care of it.
None of this is of concern if the page is hosted on netlify.
- Reset styles
- Cleanup directories
- Homepage
- Projects
- Get involved
- Update project posts
- About page
- Code of conduct
- Update this Todo
If you're new to coding, we recommend installing:
- a text editor like VS Code
- Git which is a version control system. This helps people collaborate on projects. If you're new to git, take a look a Github Git tutorial
Feel free to dive in! Open an issue, submit Pull Requests (PRs), or even start your own project!
If you'd like to get your feet wet, take a look at some good first issues.
We recommend newcomers to first read an old guide. However, the developer community recently agreed to rename the master branch to main.
As a refresher, to contribute, take the following steps:
- First,
clonethe repo
git clone <repo_url>
If you are not added yet as a collaborator, you may first need to fork the repo in order to contribute.
- Create a new
branchfrom the main branch (ormaster, or whatever branch you want to work off of).
git checkout -b <your_new_branch_name>
- Make some code edits in your code editor. Then
stageyour changes with:
git add <the_file_you_modified>
- Then you need to
commityour changes with a message
git commit -m 'A brief summary of your code'
- Push your changes to the remote repo (hosted here on Github):
git push -u origin <your_new_branch_name>
- Finally, on Github, create a Pull Request if you don't have write access to the repository.
Standard Readme follows the Contributor Covenant Code of Conduct.
- Front-end development. Most coders find it easiest to start with front-end development. This is how to code how a website looks and feels like. Languages to start with are
- HTML, CSS, Javascript: Freecodecamp
- HTML, CSS, Javascript: W3Schools
- JamStack - a modern, more sophisticated way of building websites and apps, once you know HTML, CSS, and JS.
- Back-end development. This often involves working with data and logic to do something useful. Some common, beginner-friendly languages are:
- Mobile development.
- Analytics. For machine learning, data analysis, and automation, Python is the way to go.
- Python
- Data Analysis
- Machine Learning
- User Interfaces and User Experience (UI/UX):
- Devops optimizes how people develop code
- Front-end/Back-end
- Machine Learning
- Devops
Feel free to add resources you'd find helpful, or request new ones be added by creating an issue!
Visit us on Slack Join us on Meetup
