Skeleton of an HTML/Sass site that retrieves DEV posts with a Netlify function. Uses node-sass and includes Browsersync for hot reloading. Build styles are minified and autoprefixed.
The only requirements are:
During Netlify site setup:
netlify.toml
file so use what populatesDEVTO
with the value being your DEV API keyFrom there, the rest of the build settings will pick up from the included netlify.toml
file.
After step 4, you can visit the "Deploys" area in Netlify to use the manual "Trigger deploy" option for your first deploy which will use the new environment variable and build successfully.
You will then have your new API available at [yoursite.com]/.netlify/functions/devto
containing your latest DEV posts 🙌 Continue to the Development section to learn how to run the project locally.
You can add and remove HTML pages, add an img
directory, and update the Sass however you like as long as you place an element with the class of posts
on a page that also includes the js/posts.js
script as shown on the default index.html
.
Open functions/devto.js
and in the $apiRoot
variable change the per_page
value. DEV API allows values up to 1000. Review the DEV API docs >
Open functions/devto.js
and in the generated map, add or remove values as desired. Review the DEV API docs for a sample of a returned API object.
The simple list template is created in js/posts.js
in the createPostList
at the top of the file. You can change anything about the markup used.
Review previous section if you want to add additional API values.
If you need IE11 or under support you may want to run the content of js/posts.js
through the online Babel compiler to produce an alternate to the template literal used to create the post template.
After you have a successful build, visit your API at [yoursite.com]/.netlify/functions/devto
and copy the contents into a new file in the js
directory called postdata.json
(ignored on commit by default). This will mimic the API data so you can adjust the site styling and content.
npm run develop
Serve with hot reload at localhost:1337
npm run build
Generate minified, autoprefixed CSS for production
This is the compiled version served on Netlify.
npm run serve
Serve latest build files at localhost:1337