{"id":16237258,"url":"https://github.com/tannerdolby/angular-node-blog","last_synced_at":"2026-04-17T05:03:52.683Z","repository":{"id":104525746,"uuid":"350485004","full_name":"tannerdolby/angular-node-blog","owner":"tannerdolby","description":"Blog template built with Angular and Node.js, hosted on Netlify.","archived":false,"fork":false,"pushed_at":"2021-04-04T00:00:12.000Z","size":2890,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T05:34:07.265Z","etag":null,"topics":["angular","blog-template","nodejs"],"latest_commit_sha":null,"homepage":"https://anodeblog.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tannerdolby.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-22T20:48:15.000Z","updated_at":"2022-06-09T04:10:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"087c4133-43e0-47e3-9f64-62e1c7f6825c","html_url":"https://github.com/tannerdolby/angular-node-blog","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tannerdolby%2Fangular-node-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tannerdolby%2Fangular-node-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tannerdolby%2Fangular-node-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tannerdolby%2Fangular-node-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tannerdolby","download_url":"https://codeload.github.com/tannerdolby/angular-node-blog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247807434,"owners_count":20999542,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","blog-template","nodejs"],"created_at":"2024-10-10T13:35:07.113Z","updated_at":"2026-04-17T05:03:52.636Z","avatar_url":"https://github.com/tannerdolby.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-node-blog-template\nA starter site for creating your own blog with Angular and Node.js. Angular Material was used for UI components and Express.js as the Node.js framework. Using [Netlify functions](https://www.netlify.com/products/functions/) allow for hosting fullstack applications on Netlify.\n\n## Getting Started\nTo get the project running locally on your machine:\n1. Click the \"Use this template\" button or fork this repository\n2. Clone `git clone git@github.com:your-username/angular-node-blog-template.git`\n3. Install dependencies `npm install` (in both `blog-client` and `node-app` directories)\n4. Serve locally `npm run dev` in `node-app` (you can also optionally run the Angular `blog-client` with `ng serve`)\n5. Serve Netlify lambda functions locally with `npm run serve`\n\n## Features\n- Home page with recent posts\n- Blog page with all blog posts\n- Post page with the specific blog post\n- About me page\n- Contact me page\n\n## Usage\nAll blog posts will be stored in the `blog-client/src/app/pages` directory in the angular client. To add a new blog post, simply create a new HTML file, `new-post.html` in the `/pages` directory and write your post.\n\nAfter creating your blog post in the `/pages` directory, update the `blog-client/src/assets/blog.json` file with the post metadata.\n\n```json\n[\n    {\n        \"title\": \"Learn about Collections in MongoDB\",\n        \"date\": \"3/22/2021\",\n        \"tags\": [\n            \"mongodb\",\n            \"nosql\"\n        ],\n        \"template\": \"learn-mongo-db.html\",\n        \"image\": \"./assets/images/mongodb.jpeg\",\n        \"preview\": \"MongoDB is becoming a popular choice when choosing a database. I personally really enjoy working with NoSQL databases like MongoDB because I prefer using JSON to store data rather than columns and rows.\"\n    }\n]\n```\n\nNow all of your blog posts in the `/pages` directory and post metadata in `/assets/blog.json` will be read by an API endpoint that's utilizing the [GitHub REST API](https://docs.github.com/en/rest) to fetch a files contents. The `contents` key when using the GitHub API endpoints for retreiving a file contains the files contents base64 encoded. There are options for getting the raw text but for the sake of this project, I just imported `base64` and used `.decode()` to get the decoded base64 file contents.\n\nI originally used the [File System](https://nodejs.org/api/fs.html) module when developing locally but the lambda functions didn't play nicely with bringing other static files with them to aws, therefore the GitHub REST API allows us to fetch a file and read it's contents.\n\nEach post will be accessible via `/blog/some-post` where the title `some-post` represents the `title` keys in `blog.json` with the value slugified, (ie `title: \"My Post\"` would be accessed at `/blog/my-post`). You can view all blog posts via `/blog` and the most recent posts on the homepage.\n\n## Hosting\n\nYou can headover to [Netlify](https://www.netlify.com/) to create an account if you don't already have one. Once you have setup the project locally, ie you clicked \"Use this template\" button or forked the repository. Next, simply login to your Netlify account and click \"New site from git\" then choose the repository in your users organization where this template is and your site will be deployed! \n\nOnce your site is deployed on Netlify, make sure to take note of the sites URL. You will need to update the API endpoints located in `blog-client/assets/endpoints.ts`. This makes sure the right endpoints are being hit when making API calls. See [Notes](https://github.com/tannerdolby/angular-node-blog-template/blob/master/NOTES.md) for more.\n\n## Making changes\n\nOnce your local project is running and checked into Netlify, everytime you push changes to that repository Netlify will trigger a build and redeploy the site. If you write any new blog posts in the `/pages` directory and update `/blog.json` with post metadata. Make sure to run `npm run build` from the projects root directory. This creates the Angular production build files and also builds the Lambda functions. Now you can simply commit and push your changes. After Netlify builds and redeploys the site, you will see your updates have taken place. \n\n## Improvements\n- Add some sort of caching, so the GitHub API endpoints don't need to fire every page reload.\n\n## Contributing\nFeel free to contribute to this project by suggesting a new feature or modification. I built this template for others to use and personalize, so don't hesitate to let me know what you'd like to see added/modified.\n\n- Open an [issue](https://github.com/tannerdolby/angular-node-blog-template/issues) for any features/modifications you would like too see.\n- Have a look at the contributing guidelines before submitting a PR.\n\n## Remarks\nI'd love to see this being used out in the wild, so if you setup your blog using this template feel free to tweet about it and [tag me](https://twitter.com/tannerdolby)! 🚀\n\n### Other `npm` commands\n- `npm run build`: Builds the Angular app and Netlify lambda functions.\n- `npm run start`: Serves the Node/Express app locally.\n- `npm run dev`: Serves the Node/Express app locally with [hot reloading](https://www.npmjs.com/package/nodemon).\n- `npm run serve`: Serves the Netlify lambda app locally.\n- `npm run build-lambda`: Builds the `functions` folder for lambda app.\n- `netlify dev`: Serves the Netlify lambda functions and app locally.\n\n## Maintainer\n[@tannerdolby](https://github.com/tannerdolby)\n\n## License\nThis project is under the [MIT](https://github.com/tannerdolby/angular-node-blog-template/blob/master/LICENSE.md) license.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftannerdolby%2Fangular-node-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftannerdolby%2Fangular-node-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftannerdolby%2Fangular-node-blog/lists"}