A simple, content-focused, minimal blog site built using NuxtJS and Bulma.
To interact with this site, clone the repository and run the following code on the command line.
npm install
npm run devYou can just hit the ground running by changing all instances of my name ('Dyllon') to your own, and editing other content as you see fit (e.g. on the homepage in the components/Hero.vue, and on the about page in pages/about/index.vue).
To create a blog post, simply copy an existing Markdown (.md) file that lives in content/posts/. Change the front matter to reflect your own post, and modify blog post content in the markdown itself. (Need help with Markdown?)
Images for your newly created blog post should live in the folder static/post/{your blog post}/. For example, if your blog post had the filename hello.md, you should make an images folder titled static/post/hello/.
You'll then include those images using my component <InlineImage>, which I'll talk about later.
Use as you would a normal <img> tag, specifying src, alt, and (if desired) width. You can also specify :clickable=false if you don't want to allow the user to view the image in a fullscreen gallery view.
This site comes with all the same blog capabilities as a normal site, such as syntax highlighting, images, HTML support, and Vue components. Read this if you're curious about features.
You can also include a few custom components I've made:
InfoBox.vue is component that allows you to put notes/warnings/messages in your blog posts. Feel free to edit the component to adjust its styling.
InlineImage.vue optimizes and handles the messy parts of images.
In specific, it:
- Allows for fullscreen, gallery views via
v-img. - Optimizes images with
nuxt-optimized-images.
ResponsiveVideo.vue takes a YouTube url (or otherwise embeddable video link) and makes it responsive.
You can see all of these components in action in the sample blog post.
The site relies on three colors: a primary (background), secondary (accent), and a primary-invert (text). These are all defined in Sass variables that live in assets/scss/colors.scss. To change the appearance of your site, simply modify the colors you'd like to see as your background ($primary), your text ($text), and your accent ($secondary). Obviously, make sure your $primary and $text colors have sufficient contrast.
An example of this can be seen below the Sass defaults that live within assets/scss/colors.scss. Simply uncomment those lines (preceded by the comment "LIGHT MODE") to see your site with light mode defaults.
Images are optimized during build thanks to nuxt-optimized-images.
Setting proper meta tags for your site is important for effective search engine optimization (SEO) rankings. Use getSiteMeta(), found in the utils/ folder, to provide different tags for each page and for each blog post. This file allows the Twitter Cards for my home page and for a blog post to look different, like this:
The site is set up so that your cards will appear this way automatically! All you will have to do is edit utils/getSiteMeta(), as you'll read about later. Page-specific meta tags are also helpful for search engine optimization; you might attract a larger number of visitors if you have a variety of keywords.
I recommend deploying your site with Netlify. Netlify will handle the "hard parts" of your build process, and it handles deploys automatically when you push to GitHub.
Specifically, you'll take three steps:
- Visit Netlify and click 'New Site from Git'
- Connect this repository
- Under 'Basic build settings', put
npm run generateas the build command, and make sure the publish directory is set todist/. Every other setting can be left untouched.
This will create a site with some funky URL. You'll probably want to change it in Netlify's settings (e.g., myactualsite.netlify.app) or connect a custom domain (e.g., www.mycustomdomain.com).
Within your project, you'll need to specify your base URL so that all file paths cooperate. You'll get your base URL from Netlify, or whatever other service you end up using. (For example, the base URL for this site is https://nuxt-blog-starter.netlify.app/; yours will likely look similar.)
Once you have your base URL, add it to nuxt.config.js (at the top of the file, you'll see const url = ...).
While you're at it, go ahead and change the site metadata in utils/getSiteMeta.js. This file contains all of the 'meta tags' for your website. Its important you change these to reflect your own site (unless you want my name on everything!). I've highlighted the things you'll want to change (Twitter handle, site title, site description, and site URL) with comments that pleasantly yell // CHANGE ME!.
To update your OG image that will appear in Twitter Cards, iMessages, etc., replace the file static/social.png. Similarly, you'll probably want to replace the site icon in static/favicon.png.
That should be it! Is anything unclear, or want to see some other functionality? Open an issue, or message me on Twitter @CL_Schmehl.