搭建基于nodejs的静态博客程序 react-static-site

 git clone https://github.com/BradDenver/react-static-site react-static-site-by-braddenver

 cd  react-static-site-by-braddenver

npm install && npm install -g bower && bower install

新建源帖：

cd posts

nano test.md

cat test.md

显示：

测试一下。

看看如何？

（上面蓝色字体处写正文或html code)

cd ..

nano paths.js

cat paths.js

显示：

var paths = {
  '/': {
    title: 'Home',
    page: 'home.html'
  },
  '/about': {
    title: 'About',
    page: 'about.html'
  },
  '/blog': {
    title: 'Blog'
  },

  posts: {
 sixth_post: {
      title: '稀奇古怪的中国经济',
      md: 'ce.md',
      published: '2024-01-15',
      preview: '这是一篇文章'
    },
  fifth_post: {
      title: '中国最安逸的城市',
      md: 'yz.md',
      published: '2024-01-15',
      preview: '这是一篇文章'
    },
  fourth_post: {
      title: '美丽的草原，我的家',
      md: 'pg.md',
      published: '2024-01-15',
      preview: '这是一首歌'
    },
    third_post: {
      title: '测试',
      md: 'test.md',
      published: '2024-12-22',
      preview: '测试一下.'
    },
 second_post: {
      title: 'I Blogged Again',
      md: 'blogged_again.md',
      published: '2015-01-03',
      preview: 'Oops I did it again.'
    },
    first_post: {
      title: 'My First Blog Post',
      md: 'first_post.md',
      published: '2015-01-01',
      preview: 'Everyone has to start somewhere.'
    }
  }
};

module.exports = {
  allPaths: function() {
    return paths;
  },
  allPosts: function() {
    return paths.posts;
  },
  pageForPath: function(path) {
    return this.pageReq()('./' + paths[path].page);
  },
  postForPath: function(path) {
    return this.postReq()('./' + paths.posts[path].md);
  },
  pageReq: function() {
    return require.context('./pages', false, /^\.\/.*\.html$/);
  },
  postReq: function() {
    return require.context('./posts', false, /^\.\/.*\.md$/);
  }
};

只需要改上面蓝色字体部分。

node build.js (此即生成/更新静态网站的根目录的命令）

cd public

~/react-static-site-by-braddenver/public (master)$ ls
about/  assets/  blog/  index.html
 

(可见~/react-static-site-by-braddenver/public 就是静态网站的根目录）

在浏览器里，访问https://app.netlify.com/drop,上传~/react-static-site-by-braddenver/public目录的内容，上传完成后，得到网址https://dapper-hamster-cf3427.netlify.app/，

https://dapper-hamster-cf3427.netlify.app/blog/

项目地址：https://github.com/BradDenver/react-static-site 

演示网址：

https://dapper-hamster-cf3427.netlify.app/，

https://dapper-hamster-cf3427.netlify.app/blog/