How to build a blog using next.js? - node.js

I'm new to web development, recently I want to build my own blog. I use Next.js to host my pages, I have already got the skeleton done, but there are still some significant problems.
How to render pages from markdown file? I just don't know how others do this. Do I have to use fs in the 'server.js' file and respond to certain request by md file? Or there are other ways?
If step 1 was completed, I wonder if I have <img> tags in my markdown file which refer to some local pictures, how can I render those?

To answer 1. You can use the npm package markdown-to-jsx .
But I strongly recommend using Docusorous or GatsbyJS for this purpose. Both have your requirement inbuilt.
Secondly, for Images - You can always include them in Markdown and they will be converted to JSX using markdown-to-jsx .

Related

How to place text on image with nodejs without use of third-party libraries

Please explain, how can I add some text to the image with nodejs. I googled all day but didn't find a solution other than using libraries. Why is this done in php with one line of code, but with nodejs you need bunch of third-party code to be imported to your server? Thank you.

Is there a way I can embed code from github repository in a node js site?

Is there a way I can embed the code in a file present in github repository into a page of site being developed on node js.
Simplest I can think of is invoke a ajax call and pull the content into a dom element on the page.
Is there any other way out?
EDIT
Code on github is not nodejs code.
A use case:
I have ruby code committed and shared on github, now I want to refer that code on a site being created using nodejs.
Gist-it is your solution for it. A man named "Robert Krimen" is kind enough to create an application so that we can embed any file from github repository to our webpage/blog. You can do it as simple as in three steps, just like you embed a gist, hoping you are familiar with embedding gist.
Copy github url of the file you like to embed.
Submit it to Gist-it and copy the script tag generated.
Use the script tag copied in you blog, same as you use gist.
for further reference
http://blog.revathskumar.com/2012/08/embed-files-from-github-repository-into-webpage.html

is it possible to use the gatsby static site generator with reactrb?

So, I'm basically still pretty new to the whole npm/react.js (let alone react.rb) ecosystem, and I'm wondering if it would be possible to use reactrb with the gatsby static site generator.
I've been attempting to get opal/reactrb support through opal-webpack, but have been running into some issues (see this issue for some backstory https://github.com/cj/opal-webpack/issues/36). Specifically where I got stuck was trying to get it to play nice with bundler.
Is combining reactrb components with gatsby something that's even feasible? I'm hoping the answer is yes.
Sorry for the very late response. Reactrb has been renamed ruby-hyperloop and yes, you can certainly use it with Gatsby and any static site generator. The Hyperloop website is built with Middleman for example.
The best way to integrate Hyperloop into a static site generator is by using Hyperloop.JS https://github.com/ruby-hyperloop/hyperloop-js which has not server footprint at all.
Please see the Hyperloop website for examples and tutorials: http://ruby-hyperloop.io/
You can fetch data into Gatsby form any kind of source. You need to create a source plugin. The answer from #BarrieH is accurate, but could be slightly misleading.
You cannot query directly from an external GraphQL API into a component. Gatsby works by loading all your data into its own nodes system, then you pull data from those nodes into your components. This is what allows Gatsby to compile your data to static JSON files on disk, pre-fetch data for other pages, and so on.
Here's the relevant docs:
https://www.gatsbyjs.org/docs/create-source-plugin/

Reveal.js server - serve many presentations

I'm using markdown and reveal.js to create presentations, and want to start using node.js to serve them from my website.
I've read the docs for reveal.js and it seems like it's easy to do for one presentation, but trickier for several. For example, I'd like
http://mysite/presentations/rabbits
and
http://mysite/presentations/deer
to run on the same instance of node, but each point to a different presetation. Is this possible natively (or with existing plugins), or will I have to hack something together myself?
I know, just three years late. But in case anyone might end up here to look for an answer, there's a working recipe over here: https://web.archive.org/web/20151223044405/https://medium.com/#KienanKB/serving-multiple-reveal-js-presentations-b1a5c086e959 (archived link to the now removed article).
Note: Reveal.js changed the part defining what files it watches:
html: {
 files: [ ‘index.html’ ]
}
Instead of ‘index.html’ it now reads ‘*.html’. 
The recipe still works fine though.
As long as you're using basic features you don't need node.js at all - just drop the reveal.js distribution in every presentation folder where it is served statically.
Another option is hosting on github pages, I've checked it now for this scenario and it seems to be served right.
You might also want to raise this issue at the project page https://github.com/hakimel/reveal.js/issues

NoSQL/MongoDB Style Query Engine in Node.js

I've built a static website generator which more or less converts markdown documents to html pages. Documents can have tags, which are useful for discovering related documents - and thus is the requirement for a query engine.
Right now I'm using MongoDB but as the application is coded in Node.js and due to the extreme lack of MongoDB support on Node.js hosts (so far no.de is the only one that I know of which supports mongodb), as well as a static website generator having absolutely no need for data persistence, I'd like to remove MongoDB and just keep the query engine.
Are there any MongoDB/NoSQL like query engines coded natively in Node.js/javascript? Or is there a better solution I haven't thought of yet... :S
Thanks guys.
Edit: If there is no such thing, who would like to build it with me? Post a comment if so :)
I'd check out JSONSelect which uses css selectors for querying js objects
Created my own in Coffee-Script for use on the Server-Side with Node.js and Client-Side with Web-Browsers.
It supports all the same queries as MongoDb. Find it here:
https://github.com/bevry/query-engine
RavenDB has a REST API and jQuery plugin available.
For example see http://andreasohlund.net/2011/02/19/accessing-ravendb-using-jsonp/
Take a look at libgit2 which is a C library for git and also the gitteh module for node.js This will give you a node wrapper around a git library - now you can have a local git repo that saves a versioned copy of your static files and serves it up via node.js. What more could you ask for? Plus push pull from github no problem - it knows the git protocols.
I haven't built this myself but happy to help if you want to do this

Resources