Total Pageviews

Thursday 31 October 2024

扬州慢·淮左名都 作者:姜夔〔南宋〕

 

淳熙丙申至日,予过维扬。夜雪初霁,荠麦弥望。入其城,则四顾萧条,寒水自碧,暮色渐起,戍角悲吟。予怀怆然,感慨今昔,因自度此曲。千岩老人以为有《黍离》之悲也。

淮左名都,竹西佳处,解鞍少驻初程。过春风十里,尽荠麦青青。自胡马窥江去后,废池乔木,犹厌言兵。渐黄昏,清角吹寒,都在空城。
杜郎俊赏,算而今,重到须惊。纵豆蔻词工,青楼梦好,难赋深情。二十四桥仍在,波心荡,冷月无声。念桥边红药,年年知为谁生?

-----------------------------------------------------

 姜夔的生平

姜夔(kuí)(约1155—约1221),字尧章,号白石道人,汉族,一说南宋饶州鄱阳(今江西鄱阳 [20] [24-26])人,另一说江西德兴人 [22],南宋文学家、音乐家 [19],被誉为中国古代十大音乐家之一。
他少年孤贫,屡试不第,终生未仕,一生转徙江湖,靠卖字和朋友接济为生。他多才多艺,精通音律,能自度曲,其词格律严密。其作品素以空灵含蓄著称,姜夔对诗词、散文、书法、音乐,无不精善,是继苏轼之后又一难得的艺术全才。姜夔词题材广泛,有感时、抒怀、咏物、恋情、写景、记游、节序、交游、酬赠等。他在词中抒发了自己虽然流落江湖,但不忘君国的感时伤世的思想,描写了自己漂泊的羁旅生活,抒发自己不得用世及情场失意的苦闷心情,以及超凡脱俗、飘然不群,有如孤云野鹤般的个性。姜夔晚居杭州西湖,卒葬西马塍。
有《白石道人诗集》《白石道人歌曲》《续书谱》《绛帖平》等书传世。

早年经历
公元1154年(南宋绍兴二十四年),姜夔出生于一个破落官宦之家, [1]他父亲姜噩,是绍兴三十年进士 [18],先后官任新喻(今江西新余)县丞,汉阳(今湖北武汉)知县,在知县任上病卒。
姜夔很小的时候,就跟随父亲到任职地,父亲死后,十四岁的姜夔依靠姐姐,在汉川县山阳村度完少年时光,直到成年。姜夔曾于公元1174年(淳熙元年)至1183年(淳熙十年),四次回家乡参加科举考试,均名落孙山。
仕途不顺的姜夔四处流寓,曾涉足过扬州、江淮一带,后来又客居湖南。大约在1185年(淳熙十二年),认识了诗人萧德藻,因为情趣相投,两人结为忘年之交。
萧德藻是福建闽清人,绍兴十一年进士,曾官任龙川县丞、湖北参议,后调湖州乌丞县令,擅长作诗,与范成大、杨万里、陆游、尤袤齐名。由于赏识姜夔的才华,他特将自己的侄女许配给姜夔。
公元1186年(淳熙十三年)冬天,萧德藻调官湖州,姜夔也决定和萧家随行。第二年暮春,萧德藻正式去湖州上任,途经杭州,介绍姜夔认识了著名诗人杨万里。杨万里对姜夔的诗词嗟赏不置,称赞他“为文无所不工”,酷似唐代著名诗人陆龟蒙,也和他结为忘年之交。之后杨万里还专门写信,把他推荐给另一著名诗人范成大。范成大曾官任参知政事(副宰相),当时已经告病回老家苏州休养,他读了姜夔的诗词,也极为喜欢,认为姜夔高雅脱俗,翰墨人品酷肖魏晋间人物。
寓居湖州
得到杨、范两位诗坛大家的揄扬,姜夔名声籍甚,此后寓居湖州达十多年。湖州弁山风景优美,公元1190年(绍熙元年),他正式卜居弁山苕溪的白石洞天,朋友潘德久遂称他为“白石道人”。
姜夔为人潇洒不羁,以陆龟蒙自许,当时的名流士大夫都争相与他结交,连大学者朱熹也对他青眼相加,不但喜欢他的文章,还佩服他深通礼乐。著名词人辛弃疾对他的词也深为叹服,曾和他填词互相酬唱。
四处游历
在湖州居住期间,姜夔仍旧时时四处游历,往来于苏州、杭州、合肥、金陵、南昌等地,这些经历在他的词集和诗集中多有反映。
公元1190年(绍熙元年),他客游合肥,寓居赤阑桥,和范仲讷为邻,在合肥,他有相好的两位歌妓姐妹,彼此之间情深意厚,后来他做了很多诗词,纪念这段美好时光。
公元1191年(绍熙二年),姜夔从合肥出发,泛巢湖,作《满江红》词,以浪漫的笔法和想象,讴歌巢湖仙姥,兼怀古叹今。这年夏天,又到金陵谒见杨万里,其间作了《醉吟商小品》词,怀念合肥情侣。秋天,再度奔赴合肥,作《凄凉犯》词,通过对合肥城邑荒凉景色的描写,抒发自己的忧国之思。姜夔和合肥姐妹的感情,是他一生中极为重要的感情经历。从二十多岁认识这对姐妹以来,他有过多次合肥寓居之举,直到绍熙二年秋,那对姐妹离开合肥才止。他在这年作的《秋宵吟》中无可奈何地说:“卫娘何在,宋玉归来,两地暗萦绕。摇落江枫早,嫩约无凭,幽梦又杳。”对她们的离去表现出无比伤感和眷恋。同年冬天,姜夔再次来到苏州,谒见范成大,作《雪中访石湖》诗,范成大作诗见答。姜夔在范家踏雪赏梅,范成大向他征求歌咏梅花的诗句,姜夔填《暗香》、《疏影》二词,范成大让家中歌女习唱,音节谐婉,大为喜悦,特意把歌女小红赠送给姜夔 [27]。除夕之夜,姜夔在大雪之中乘舟从石湖返回苕溪之家,途中作有七绝十首,过苏州吴江垂虹桥之时,写下了“小红低唱我吹箫”的名句。
公元1193年(绍熙四年),姜夔大约三十九岁,他在杭州结识了世家公子张鉴。张鉴是南宋大将张俊的诸孙,家境豪富,在杭州、无锡都有田宅。他对姜夔的才华也很欣赏,因为姜夔屡试不售,曾经想出资为姜夔买官,但姜夔却不想用这种让人羞愧的方式进入仕途,婉言谢绝。此后姜夔经常出入张鉴家,相互作诗填词唱和。
移家杭州
公元1196年(庆元二年),萧德藻被侄子萧时父迎归池阳,姜夔在湖州失去依傍,遂干脆移家杭州,依附张鉴及其族兄张镃,后不再迁徙,在杭州居住终老。张鉴是姜夔晚年最好的知己,两人友谊极深,姜夔自己说:“十年相处,情甚骨肉。”
公元1202年(嘉泰二年),张鉴死后,姜夔非常悲痛,作诗哀挽,可见其情意之深。
是时南宋朝廷定都杭州已经六七十年之久,原来的乐典散落。
公元1197年(庆元三年),四十三岁的姜夔曾向朝廷献《大乐议》、《琴瑟考古图》,希望获得提拔,但朝廷没有重视。两年之后,姜夔再次向朝廷献上《圣宋铙歌鼓吹十二章》,这次朝廷下诏允许他破格到礼部参加进士考试,但他仍旧落选,从此完全绝了仕途之念,以布衣终老。
公元1202年(嘉泰二年),自张鉴死后,姜夔生活开始逐年走向困顿。
公元1204年(嘉泰四年)三月,杭州发生火灾,尚书省、中书省、枢密院等政府机构都被延及,二千零七十多家民房也同时遭殃,姜夔的屋舍也在其列,家产图书几乎烧光,这对于姜夔无疑又是一个打击,由于亲朋好友相继故去,姜夔投靠无着,难以为生,六十岁之后,还不得不为衣食奔走于金陵、扬州之间。
最后结局
公元1221年(嘉定十四年),姜夔去世,他死后靠友朋吴潜等人捐资,才勉强葬于杭州钱塘门外的西马塍,这也是他晚年居住了十多年的地方。

 
主要成就

诗词创作
姜夔诗法江西黄庭坚,其词也颇受黄庭坚诗学的影响。 [17]他自己说,三沐三熏黄太史氏。姜夔的词境独创一格,艺术思维方式和表现手法也别出心裁。他善于用联觉思维,利用艺术的通感将不同的生理感受连缀在一起,表现某种特定的心理感受;又善于侧向思维,写情状物,不是正面直接刻画,而是侧面着笔,虚处传神。他的词在题材上并没有什么拓展,仍是沿着周邦彦的路子写恋情和咏物。他的贡献主要在于对传统婉约词的表现艺术上进行改造,建立起新的审美规范。 [5]
姜夔词清空高洁,极富想象,语言灵动自然。有很高的艺术成就。他的艺术特色可用张炎所下断语“清空”二字来概括。这种清空既不同于传统婉约派的绵丽软媚,不同于豪放派末流的粗犷叫嚣,也不同于苏轼以旷达为主要特色的那种清空。要而言之,姜夔更善于以诗人的笔法入词,且更多地以“骚”的手法入词,对客观对象不作更多的质实描写,而对灵气飘忽的心境则极善捕捉与表达。在以骚笔入词时,又善于吸收江西诗风注重锤炼、讲究瘦硬峭拔的特点,因而在清空之中带有一种刚劲峻洁之气。
姜夔词具有“清空”和“骚雅”的特色。姜夔的清空出自苏轼,骚雅脱胎于辛弃疾。苏、辛都是无意为词的,他们的清空、骚雅都是通过诗歌化的途径实现的。姜夔在引诗济词方面和苏、辛是相同的,但他有意为词,将词的音律、创作风格和审美理想纳入一定的法度之中,将原来并无必然联系的清空、骚雅联成一体,形成一种新的词风。南宋江湖词派理论和创作就是阐释和普及这种清空骚雅词风的。他根据自己对音乐精神的理解,改造唐宋乐谱,使市井俗乐与传统雅乐的精神相通;他总结化用才学的法度,从众多的典故中汲取其共同意义,把具体的情感升华为空灵模糊的意趣;他用近俗的题材,表现出雅正的情感。他从词体的特征出发,因势而利导,随俗而雅化,使清空与骚雅连成一体,形成一种新的词风。宋人以才学为词,抒发的情感比较空泛。沦落江湖,远离政治风波,使江湖词人抒发的情感多是一种清雅的意趣。姜夔词的情感是孤云野飞、去留无迹的意趣,由于它无所定指,以致《暗香》、《疏影》的主题千余年来尚无定论。史达祖、吴文英、周密等风尘小吏的词作虽然有一定的现实感受,但主要还是以抒情为主,并具有结体为虚的特点。张炎、王沂孙等人抒发的是宋社既屋的亡国之痛、遗民故老的黍离之悲,这种情感很难落实到具体的事件之上。散处江湖,与社会现实比较隔膜,促成了空灵情感与骚雅人品的结合。
宋代词学的创作风格是趋向“清空”的,而审美理想是趋向“骚雅”的。到了姜夔的笔下,才把它们绾结起来。姜夔恪守本色,一切从法度出发,这使清空和骚雅的结合成为一种必然。姜夔对词体进行了全面的雅化,南宋中后期词人极工极变,皆不出姜夔的划域,并且各具姜夔的某种风格特征。后来这些相近的风格汇集起来,就形成了一个词学流派。这就是以姜夔为典范的南宋江湖词派。而江湖词派的三部词法,两部词选,还有频繁的词社聚会,都是在实践和传递姜夔的清空骚雅词法。像这样同时具备词人、词作、词选、词论、词社等五种因素比较典型的词学流派,在中国古代文学史上还是不多见的。
姜夔以有意的心态从事词的创作,认真探讨词的各种法度。因此,后人把以姜夔为代表的一些南宋词人合称为“骚雅派”。其中包括南宋中后期的姜夔、吴文英、史达祖、高观国、张炎、王沂孙、周密等人。这是继辛弃疾之后所形成的又一个词派。他们既不同于香而弱的婉约派,也不同于苏辛以来的豪放派。他们更注重人工思力的安排,和周邦彦较为相近。但他们在风格上有更明确和自觉的追求,更注重发挥传统的“雅”与“骚”的传统。所谓“雅”是指他们都受时代濡染,以雅相标榜,以雅为美学理想。所谓“骚”是指以诗人的笔法入词,侧重继承以《离骚》为开创和代表的,以表现自我、抒发自我的主观性描写为主要目的的抒情传统。注重抒写心境是这派词人的重要特征,也是这派词人对词的发展和贡献。骚雅派词人加强了词的表现自我的能力,丰富了词的抒情手段,在词史上有一定的开创之功,但为了追求骚雅,又走上了过于隐晦、细小、破碎、缺少开阔意境与开阔手段的道路,将词带入一个狭小的天地,这对词的发展又起到了不利的限制作用。姜夔是这一词派的最高代表。
书法创作
姜夔也是一位书法家。他的《续书谱》仿效孙过庭的《书谱》而撰写,但并非《书谱》之续。全卷分总论、真书、用笔、草书、用笔、用墨、行书、临摹、方圆、向背、位置、疏密、风神、迟速、笔势、情性、血脉、书丹等十八则,所论书法艺术的各个方面,实自抒其心得之语。是南宋书论中成就最高,影响最大的学术著作。姜夔“崇晋贬唐”,反对俗书,和提倡文人意趣的苏东坡、黄庭坚、米芾等相一致。但他对“唐法”并非不问青红皂白一概予以否定,而是用了大量篇幅对“法”进行了系统的、全面的论述,并从肯定和解释引申了“晋韵”古法。
音乐创作
姜夔是我国古代杰出的词曲作家,他的词调音乐无论在艺术上及思想上都达到了较高水平,并具有独创性。姜夔的词调音乐创作继承了古代民间音乐的传统,对词调音乐的格律、曲式结构及音阶的使用有新的突破,并且形成了独特风格。
姜夔对于音乐史的主要贡献就是留给后人一部有“旁谱”的《白石道人歌曲》六卷,包括他自己的自度曲、古曲及词乐曲调。其代表曲有《扬州慢》、《杏花天影》、《疏影》、《暗香》。
《白石道人歌曲》是历史上注明作者的珍谱,也是带有曲谱的宋代歌集,被视作“音乐史上的稀世珍宝”,其中有10首祀神曲《越九歌》、1首琴歌《古怨》、17首词体歌曲(又称“曲子词”,这些“曲子词”又分为两首填词的古曲《醉吟商·胡渭州》和《霓裳中序第一》)、一首《玉梅令》(这是诗人为范成大所写曲调填词)、14首姜夔自己写的“自度曲”。他突破了词牌前后两段完全一致的套路,使乐曲的发展更为自由,在每首“自度曲”前,他都写有小序说明该曲的创作背景和动机,有的还介绍了演奏手法。
姜夔能娴熟地运用七声音阶和半音,使曲调显得清越秀丽,这与他独具一格的清刚婉丽、典雅蕴藉的词风结合得天衣无缝。杨万里称其有“裁云缝雾之构思,敲金戛云之奇声”。
自唐末战祸四起,经过近半个世纪五代十国的战乱时期,宫廷雅乐大受挫伤,大部分的宫廷音乐、乐人流入民间。自商周以来规模盛大、气势恢弘、象征着皇权政治与王朝文化的宫廷音乐,到了宋朝则开始让位于正在崛起的民间音乐艺术。为改进宋时较混乱的音乐生活局面,姜夔曾写《大乐议》献给朝廷,希望复兴宫廷音乐,但未受重用。《大乐议》代表宋代民间音乐艺术最高成就,更为后人提供了一份了解当时音乐状况的可贵的资料。

主要作品

姜夔今存词八十多首,多为记游、咏物和抒写个人身世、离别相思之作,偶然也流露出对于时事的感慨。其词情意真挚,格律严密,语言华美,风格清幽冷隽,有以瘦硬清刚之笔调矫婉约词媚无力之意。代表作《暗香·旧时月色》、《疏影·苔枝缀玉》,借咏叹梅花,感伤身世,抒发郁郁不平之情。其《扬州慢·淮左名都》是较有现实内容之作,它通过描绘金兵洗劫后扬州的残破景象,表现对南宋衰亡局面的伤悼和对金兵暴行的憎恨。词中“二十四桥仍在,波心荡、冷月无声。念桥边红药,年年知为谁生!”几句颇受人们称道。他晚年受辛弃疾影响,词风有所转变,如《永遇乐·云隔迷楼》、《汉宫春·云日归欤》等,呈现出豪放风格。《白石道人歌曲》中有十七首自度曲,并注有旁谱。姜夔上承周邦彦,下开吴文英、张炎一派,是格律派的代表作家,对后世影响较大。其诗初学黄庭坚,后学晚唐陆龟蒙,虽精心刻意词句,但较少纤巧之痕,诗风清妙秀远,如《除夜自石湖归苕溪》十首等。所著《诗说》颇有独到见解。生平详见夏承焘《姜白石编年笺校》等。卒年据《姜夔卒年新考》。有《白石道人歌曲》、《白石道人诗集》、《诗说》、《绛帖平》、《续书谱》和琴曲《古怨》。

综合评价
姜夔是与辛弃疾并峙的词坛领袖,在文学史上有杰出的地位。浙西派词人把他奉为宋词中的第一作家,比为词中老杜。
自从柳永变雅为俗以来,词坛上一直是雅俗并存。无论是苏、辛,还是周、秦,都既有雅调,也有俗词。姜夔则彻底反俗为雅,下字运意,都力求醇雅。这正迎合了南宋后期贵族雅士们弃俗尚雅的审美情趣,因而姜夔词被奉为雅词的典范,在辛弃疾之外别立一宗,自成一派。 [5]
各家评价
张炎:姜白石词如野云孤飞,去留无迹。
黄升《中兴以来绝妙词选》卷六:白石道人,中兴诗家名流,词极精妙,不减清真乐府,其间高处,有美成所不能及。 [12]
汪森:西蜀南唐而后,作者日盛,宣和君臣,转相矜尚,曲调愈多,流派因之亦别。短长互见,言情者或失之俚,使事者或失之伉。鄱阳姜夔出,句琢字练,归于醇雅。于是史达祖、高观国羽翼之;张辑、吴文英师之于前;赵以夫、蒋捷、周密、陈允平、王沂孙、张炎、张翥效之于后,譬之于乐,舞箾至于九变,而词之能事毕矣。
周济:白石脱胎稼轩,变雄健为清刚,变驰骤为疏宕。盖二公皆极热中,故气味吻合。辛宽姜窄,宽故容藏,窄故斗硬。
刘熙载:白石才子之词,稼轩豪杰之词。才子、豪杰,各从其类爱之,强论得失,皆偏辞也。姜白石词幽韵冷香,令人挹之无尽。拟诸形容,在乐则琴,在花则梅也。
陈廷焯:姜尧章词,清虚骚雅,每于伊郁中饶蕴藉,清真之劲敌,南宋一大家也。梦窗、玉田诸人,未易接武。 [14]
朱彝尊:词莫善于姜夔,宗之者张辑、卢祖皋、吴文英、蒋捷、王沂孙、张炎、周密、陈允平、张翥、杨基,皆具夔之一体,基之后,得其门者寡矣。 [15]
王国维:白石写景之作,如:“二十四桥仍在,波心荡冷月无声。”“数峰清苦,商略黄昏雨。”“高树晚蝉,说西风消息。”虽格韵高绝,然如雾里看花,终隔一层。梅溪、梦窗诸家写景之病,皆在一隔字。北宋风流,渡江遂绝,抑真有运会存乎其间耶?问隔与不隔之别。曰:陶、谢之诗不隔,延年则稍隔矣。东坡之诗不隔,山谷则稍隔矣。“池塘生春草”,“空梁落燕泥”等二句,妙处唯在不隔。词亦如是。即以一人一词论,如欧阳公《少年游·咏春草》上半阕云:“阑干十二独凭春,晴碧远连云。二月三月,千里万里,行色苦愁人。”语语都在,便是不隔。至云:“谢家池上,江淹浦畔。”则隔矣。白石《翠楼吟》:“此地宜有词仙,拥素云黄鹤,与君游戏。玉梯凝望久,叹芳草萋萋千里。”便是不隔。至“酒祓清愁,花消英气”则隔矣。然南宋词虽不隔处,比之前人,自有浅深厚薄之别。

轶事典故

姜夔生平有一段情事,铭心而刻骨。他早年曾客居合肥,与一对善弹琵琶的姊妹相遇,从此与其中一位结下不解之缘,却因白石生计不能自足而不得不游食四方,遂无法厮守终老。姜白石诗中提及此一情事的,只有《送范仲讷往合肥三首》绝句,而他的词中,与此情有关的有二十二首之多,占其全部词作的四分之一,足见其萦心不忘。前人多因不晓本事,常常责其费解,王国维甚至有“白石有格而无情”之讥评。可事实上,白石用情之专之深,在两宋文人中只有陆游差堪比拟。这也使得他的词具有极为感人的品质,诚如夏承焘先生所说的,“在唐宋情词中最为突出”。 

-----------------

要靠自己,要自立,否则就是“投靠无着,难以为生”

---------------------

相关帖子:

https://briteming.blogspot.com/2012/02/blog-post_7150.html

free static hosting

 Azure Static Web apps have a free tier. Just point it to your GitHub repo and CD is set up.

https://genezio.com/pricing/

zeabur.com

glitch.com

https://www.digitalocean.com/products/app-platform, Digital launched app platform that allows you to host 3 static sites for free, that also includes other essential features you might need.

https://statically.io/ ,With Statically, you can optimize your open-source project, and it will load faster. Statically has a CDN for your static assets, so your open source project will load even faster! Statically uses 3 CDN providers to determine the fastest server near you. It’s time to make your open-source project shine on the web!

https://render.com/,Render gives automated and constant deployment and proactive cache invalidation for zero downtime instances. Also, you can attach unlimited collaborators and teams for free, so you can get their help in managing the site. Moreover, Render offers Pull Request Page Views automatically to enable you to test changes and view them before publishing.

Render

你可以在 Render 部署你的 Vite 应用。

  1. 创建一个 Render 账号

  2. 控制台 页面点击 New 按钮并选择 Static Site

  3. 链接你的 GitHub/GitLab 账号或使用一个公共仓库

  4. 指定一个项目名称和所用分支

    • 构建命令npm install && npm run build
    • 发布目录dist
  5. 点击 Create Static Site

    你的应用将会被部署在 https://<PROJECTNAME>.onrender.com/

默认情况下,推送到该指定分支的任何新的 commit 都会自动触发一个新的部署。Auto-Deploy 可以在项目设置中部署。

还可以为项目添加一个 自定义域名



https://about.gitlab.com/stages-devops-lifecycle/pages/ ,The extra benefit here is that you can have unlimited private repositories for free if you choose GitLab.com. Moreover, GitLab offers an excellent CI system for free. Which can be accustomed automatically to build almost any reasonably static site generator.

https://hostman.com/, Hostman is a cloud platform that provides automated deployments for static websites, backend applications, and databases. With its simple interface, multi-cloud infrastructure, and integrated CI/CD, Hostman aims to simplify the entire deployment process for developers.


https://www.back4app.com/docs-containers/run-a-static-website-on-containers, Back4app is a cloud platform with robust features for application development. Although more known for its backend services, Back4app also provides static web hosting. With Back4app, developers can leverage GraphQL and REST APIs, real-time updates, and database tools alongside their static website. Back4app emphasizes scalability, flexibility, and ease of use, making it a strong choice for comprehensive web solutions.

Stormkit.io is explicitly designed for JavaScript applications. It integrates well with Git providers, enables server-side rendering, and offers automatic scaling. If you’re developing with JavaScript (React, Vue, Svelte, etc.) and want to deploy quickly, Stormkit.io could be an excellent choice.

---------------------

https://cn.vitejs.dev/guide/static-deploy

https://vite.dev/guide/static-deploy.html 

https://cli.vuejs.org/guide/deployment.html

https://briteming.blogspot.com/2024/10/vite.html

https://xmit.dev/posts/end-to-end/

------------------------------------------------

A collection of awesome static hosting & CMS providers .

Awesome Static Hosting and CMS

Awesome

A collection of awesome static hosting providers, content management systems, and curated articles.

Inspiration

Most importantly, this list wouldn't exist without the excellent work that's been done to create the Awesome Static Website Services list. Adam has curated some of the best resources, across a wide range, to help people develop their sites.

We don't want to repeat that content, go read the original!

Content Management Systems (CMS)

  • Contentful : (web: contentful.com) - Enterprise-grade content editing for anything (more than just static sites)
  • DatoCMS : (web: datocms.com) - An open source, and commercially supported, CMS for Static Site Generators. Developed on GitHub: https://github.com/datocms
  • Forestry (web: forestry.io) - A CMS for Jekyll and Hugo sites. Host anywhere (GitHub Pages, Amazon S3, FTP, etc) and access your static CMS from site.com/admin/.
  • GraphCMS : (web: graphcms.com) - Headless CMS for Digital Creators. GraphQL Content APIs for Digital Products. Developed on GitHub: https://github.com/GraphCMS
  • Grav : (web: getgrav.org) - Modern, Crazy Fast, Ridiculously Easy and Amazingly Powerful Flat-File CMS.
  • Hokus : (web: hokus CMS) - Open source CMS for Hugo static websites.
  • Jekyll Admin (web: jekyll.github.io/jekyll-admin) - A Jekyll plugin that provides users with a traditional CMS-style graphical interface to author content and administer Jekyll sites. Developed on GitHub: https://github.com/jekyll/jekyll-admin
  • Netlify : (web: netlifycms.org) - An open source, and commercially supported, CMS for Static Site Generators. Developed on GitHub: https://github.com/netlify/netlify-cms
  • Prose : (web: prose.io) - An open source CMS for GitHub pages. Developed on GitHub: https://github.com/prose/prose
  • Sanity.io : (web: sanity.io) - Sanity is an API for structured content with a React.js editing environment
  • Siteleaf : (web: siteleaf.com) - Online editor content manager that allows you to publish anywhere, including Github Pages, and it has Jekyll support.
  • Surreal CMS : (web: surrealcms.com) - Hosted CMS for static sites over FTP or Amazon S3.

Useful Articles

Free hosting

from https://github.com/b-long/awesome-static-hosting-and-cms




部署用vite生成的静态站点


本指南建立在以下几个假设基础之上:

  • 你正在使用的是默认的构建输出路径(dist)。这个路径 可以通过 build.outDir 更改,在这种情况下,你可以从这篇指南中找到所需的指引。
  • 你正在使用 NPM;或者 Yarn 等其他可以运行下面的脚本指令的包管理工具。
  • Vite 已作为一个本地开发依赖(dev dependency)安装在你的项目中,并且你已经配置好了如下的 npm scripts:
package.json
json
{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}

值得注意的是 vite preview 用作预览本地构建,而不应直接作为生产服务器。

注意

本篇指南提供了部署 Vite 静态站点的说明。Vite 也对服务端渲染(SSR)有了实验性的支持。SSR 是指支持在 Node 中运行相应应用的前端框架,预渲染成 HTML,最后在客户端激活(hydrate)。查看 SSR 指南 了解更多细节。另一方面,如果你在寻找与传统服务端框架集成的方式,那么请查看 后端集成 章节。

构建应用

你可以运行 npm run build 命令来执行应用的构建。

bash
$ npm run build

默认情况下,构建会输出到 dist 文件夹中。你可以部署这个 dist 文件夹到任何你喜欢的平台。

本地测试应用

当你构建完成应用后,你可以通过运行 npm run preview 命令,在本地测试该应用。

bash
$ npm run preview

vite preview 命令会在本地启动一个静态 Web 服务器,将 dist 文件夹运行在 http://localhost:4173。这样在本地环境下查看该构建产物是否正常可用就方便多了。

你可以通过 --port 参数来配置服务的运行端口。

package.json
json
{
  "scripts": {
    "preview": "vite preview --port 8080"
  }
}

现在 preview 命令会将服务器运行在 http://localhost:8080

GitHub Pages

  • vite.config.js 中设置正确的 base

    如果你正要部署到 https://<USERNAME>.github.io/,或者通过 GitHub Pages 部署到一个自定义域名(例如 www.example.com),请将 base 设置为 '/'。或者,你也可以从配置中移除 base,因为它默认为 '/'

    如果你正在部署到 https://<USERNAME>.github.io/<REPO>/(例如你的仓库地址为 https://github.com/<USERNAME>/<REPO>),那么请将 base 设置为 '/<REPO>/'

  • 进入仓库 settings 页面的 GitHub Pages 配置,选择部署来源为“GitHub Actions”,这将引导你创建一个构建和部署项目的工作流程,我们提供了一个安装依赖项和使用 npm 构建的工作流程样本:

    1. yml
      # 将静态内容部署到 GitHub Pages 的简易工作流程
      name: Deploy static content to Pages
      
      on:
        # 仅在推送到默认分支时运行。
        push:
          branches: ['main']
      
        # 这个选项可以使你手动在 Action tab 页面触发工作流
        workflow_dispatch:
      
      # 设置 GITHUB_TOKEN 的权限,以允许部署到 GitHub Pages。
      permissions:
        contents: read
        pages: write
        id-token: write
      
      # 允许一个并发的部署
      concurrency:
        group: 'pages'
        cancel-in-progress: true
      
      jobs:
        # 单次部署的工作描述
        deploy:
          environment:
            name: github-pages
            url: ${{ steps.deployment.outputs.page_url }}
          runs-on: ubuntu-latest
          steps:
            - name: Checkout
              uses: actions/checkout@v4
            - name: Set up Node
              uses: actions/setup-node@v4
              with:
                node-version: 20
                cache: 'npm'
            - name: Install dependencies
              run: npm ci
            - name: Build
              run: npm run build
            - name: Setup Pages
              uses: actions/configure-pages@v4
            - name: Upload artifact
              uses: actions/upload-pages-artifact@v3
              with:
                # Upload dist folder
                path: './dist'
            - name: Deploy to GitHub Pages
              id: deployment
              uses: actions/deploy-pages@v4

    GitLab Pages 配合 GitLab CI

  • vite.config.js 中设置正确的 base

    如果你要部署在 https://<USERNAME or GROUP>.gitlab.io/ 上,你可以省略 base 使其默认为 '/'

    如果你要部署在 https://<USERNAME or GROUP>.gitlab.io/<REPO>/ 上,例如你的仓库地址为 https://gitlab.com/<USERNAME>/<REPO>,那么请设置 base'/<REPO>/'

  • 在项目根目录创建一个 .gitlab-ci.yml 文件,并包含以下内容。它将使得每次你更改内容时都重新构建与部署站点:

    .gitlab-ci.yml
    1. yaml
      image: node:16.5.0
      pages:
        stage: deploy
        cache:
          key:
            files:
              - package-lock.json
            prefix: npm
          paths:
            - node_modules/
        script:
          - npm install
          - npm run build
          - cp -a dist/. public/
        artifacts:
          paths:
            - public
        rules:
          - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

    Netlify

    Netlify CLI

    1. 安装 Netlify CLI
    2. 使用 ntl init 创建一个新站点。
    3. 使用 ntl deploy 来部署。
    bash
    # 安装 Netlify CLI
    $ npm install -g netlify-cli
    
    # 在 Netlify 中创建一个新站点
    $ ntl init
    
    # 部署一个独一无二的预览 URL
    $ ntl deploy

    Netlify CLI 会给你分享一个预览的 URL 来检查部署结果。当你准备好了发布生产版本时,请使用 prod 标志:

    bash
    # 部署站点到生产环境
    $ ntl deploy --prod

    Netlify with Git

    1. 将你的代码推送到 git 仓库(GitHub、GitLab、BitBucket 或是 Azure DevOps 等服务)
    2. 在 Netlify 中 导入该项目
    3. 选择分支,输出目录,如果需要还可以设置环境变量。
    4. 点击 部署
    5. 你的 Vite 应用就部署完成了!

    在你的项目被导入和部署后,所有对生产分支以外的其他分支(可能来自合并请求)的后续推送都会生成 预览部署,所有对生产分支(通常是 "main")的更改都会生成一个 生产部署

    Vercel

    Vercel CLI

    1. 安装 Vercel CLI 并运行 vercel 来部署。
    2. Vercel 会检测到你正在使用 Vite,并会为你开启相应的正确配置。
    3. 你的应用被部署好了!(示例:vite-vue-template.vercel.app
    bash
    $ npm i -g vercel
    $ vercel init vite
    Vercel CLI
    > Success! Initialized "vite" example in ~/your-folder.
    - To deploy, `cd vite` and run `vercel`.

    Vercel for Git

    1. 将你的代码推送到远程仓库(GitHub, GitLab, Bitbucket)
    2. 导入你的 Vite 仓库 到 Vercel
    3. Vercel 会检测到你正在使用 Vite,并会为你的部署开启相应的正确配置。
    4. 你的应用被部署好了!(示例:vite-vue-template.vercel.app

    在你的项目被导入和部署后,所有对分支的后续推送都会生成 预览部署,而所有对生产分支(通常是"main")的更改都会生成一个 生产构建

    查看 Vercel 的 Git 集成 了解更多细节。

    Cloudflare Pages

    Cloudflare Pages via Wrangler

    1. 安装 Wrangler CLI.
    2. 使用 wrangler login、通过你的 Cloudflare 账号完成 Wrangler 身份校验。
    3. 运行你的构建命令
    4. 使用 npx wrangler pages deploy dist 部署。
    bash
    # 安装 Wrangler CLI
    $ npm install -g wrangler
    
    # 使用 CLI 工具登录 Cloudflare 账号
    $ wrangler login
    
    # 运行构建命令
    $ npm run build
    
    # 创建一个新的部署
    $ npx wrangler pages deploy dist

    在你的资产上传后,Wrangler 会给你一个预览 URL 来检查你的网站。当你登录到 Cloudflare Pages 仪表板时,你会看到你的新项目。

    Cloudflare Pages with Git

    1. 将你的代码推送到你的 Git 仓库(GitHub, GitLab)
    2. 登录 Cloudflare 控制台,在 Account Home > Pages 下选择你的账号
    3. 选择 Create a new Project 以及 Connect Git 选项
    4. 选择你想要部署的 Git 项目,然后点击 Begin setup
    5. 根据你所选择的 Vite 框架,在构建设置中选择相应的框架预设
    6. 记得保存!然后部署吧!
    7. 然后你的应用就部署完成了!(例如: https://<PROJECTNAME>.pages.dev/

    在你的项目被导入和部署后,所有对该分支的后续推送都会生成一个 预览部署,除非你特意在 控制分支构建 的选项中写明不触发。所有对 生产分支(通常是 "main")的更改都会生成一个 生产构建

    你也可以添加自定义域名,并自定义各个页面的构建设置。查看 Cloudflare 页面与 Git 集成 了解更多详情。

    Google Firebase

  • 确保已经安装 firebase-tools

  • 在项目根目录创建 firebase.json.firebaserc 两个文件,包含以下内容:

    firebase.json
  • json
    {
      "hosting": {
        "public": "dist",
        "ignore": [],
        "rewrites": [
          {
            "source": "**",
            "destination": "/index.html"
          }
        ]
      }
    }
    .firebaserc
    1. js
      {
        "projects": {
          "default": "<YOUR_FIREBASE_ID>"
        }
      }
    2. 运行 npm run build 后,通过 firebase deploy 命令部署。

    Surge

    1. 首先确保已经安装 surge

    2. 运行 npm run build

    3. 运行 surge dist 命令部署到 surge。

    你也可以通过添加 surge dist yourdomain.com 部署到一个 自定义域名

    Azure 的静态网站应用

    你可以通过微软 Azure 的 静态网站应用 服务来快速部署你的 Vite 应用。你只需:

    安装完此扩展后,进入你应用的根目录。打开 SWA 的扩展程序,登录 Azure,并点击 '+',来创建一个全新的 SWA。系统会提示你指定所需的订阅 key。

    按照扩展程序的启动向导,给你的应用程序起个名字,选择框架预设,并指定应用程序的根目录(通常为 /)以及构建文件的路径 /dist。此向导完成后,会在你的 repo 中的 .github 文件夹中创建一个 GitHub Action。

    这个 action 致力于部署你的应用程序(可以在仓库的 Actions 标签中,查看相关进度),成功完成后,你可以点击 GitHub 中出现的 “浏览站点” 的按钮,查看你的应用程序。

    Render

    你可以在 Render 部署你的 Vite 应用。

    1. 创建一个 Render 账号

    2. 控制台 页面点击 New 按钮并选择 Static Site

    3. 链接你的 GitHub/GitLab 账号或使用一个公共仓库

    4. 指定一个项目名称和所用分支

      • 构建命令npm install && npm run build
      • 发布目录dist
    5. 点击 Create Static Site

      你的应用将会被部署在 https://<PROJECTNAME>.onrender.com/

    默认情况下,推送到该指定分支的任何新的 commit 都会自动触发一个新的部署。Auto-Deploy 可以在项目设置中部署。

    还可以为项目添加一个 自定义域名

    Flightcontrol

    根据 说明,使用 Flightcontrol 来部署你的静态站点。

    Kinsta 静态站点托管

    根据 说明,使用 Kinsta 来部署你的静态站点。

    xmit 静态站点托管

    根据 说明,使用 xmit 来部署你的静态站点。

    from https://cn.vitejs.dev/guide/static-deploy.html 

    -------------------------------

    Next generation frontend tooling. It's fast!

    vite.dev

    npm package node compatibility build status Start new PR in StackBlitz Codeflow discord chat


    Vite ⚡

    Next Generation Frontend Tooling

    • 💡 Instant Server Start
    • ⚡️ Lightning Fast HMR
    • 🛠️ Rich Features
    • 📦 Optimized Build
    • 🔩 Universal Plugin Interface
    • 🔑 Fully Typed APIs

    Vite (French word for "quick", pronounced /vit/, like "veet") is a new breed of frontend build tooling that significantly improves the frontend development experience. It consists of two major parts:

    In addition, Vite is highly extensible via its Plugin API and JavaScript API with full typing support.

    Read the Docs to Learn More.

    Packages

    Package Version (click for changelogs)
    vite vite version
    @vitejs/plugin-legacy plugin-legacy version
    create-vite create-vite version

     from https://github.com/vitejs/vite

    (https://vite.dev/guide/) 

    ---------------------------------

    相关帖子:https://briteming.blogspot.com/2023/11/nodejsvalaxy.html

    Wednesday 30 October 2024

    awesome-vitepress-v1

     A curated list of awesome things related to VitePress.

    Awesome VitePress v1 (Beta) Awesome

    A curated list of awesome things related to VitePress

    📚 Resources

    Official Resources

    Tutorials

    Articles

    Videos

    Related Awesome List

    🔌 Plugins

    Official Plugins

    Pending for official plugins

    Community Plugins

    🎨 Themes

    Official Themes

    Community Themes

    🗂️ Projects Using VitePress

    Official Projects

    Projects

    • Vite Ruby - Vite Ruby docs based on the official Vue doc theme
    • StackBlitz Docs - Documentation for StackBlitz, an online development
    • Genshin Interactive Map - Kongying Tavern Genshin Interactive Map Documentation environment.
    • ruabick - Dumi like tool
    • Slidev - Documentation for Slidev, Presentation Slides for Developers
    • MODX Revolution - Open Source documentation for MODX Revolution
    • Rollup.js - Documentation for Rollup, The JavaScript module bundler
    • MTGJSON - MTGJSON Documentation
    • Windi CSS - Documentation for Windi CSS
    • Omnivore - Documentation for the Omnivore, an open source read-it-later solution
    • Iconify - Documentation for Iconify, over 150,000 open source vector icons in one framework
    • Fusion UI Documentation for Fusion UI, a Vue 3 component library
    • upscale - Website to visually compare the output created with over 600 different AI upscaling models.
    • asdf - Manage multiple runtime versions with a single CLI tool, extendable via plugins.
    • Chromatone.center - Visual Music Language web-site. Learn music theory with colors and improve your music practice with interactive web-apps.
    • Graffle - Simple GraphQL Client for JavaScript. Minimal. Extensible. Type Safe. Runs everywhere.

    Blogging Websites

    ❤️ VitePress Top Contributors

    🙏 How to Contribute

    Thank you for your interests in Awesome VItepress. All kinds of contributions are valuable to making Vitepress more popular!

    We ask that you kindly follow this simple guideline

    1. Make sure to add items in the right section or subsection!
    2. To be fair to people before you, please add your items at the end.
    3. Feel free to reorganize sections or subsection as appropriate, including adding new ones or editing current ones.
    4. If you could, please provide details or documentation links to each item. Please do not add items that are invalid, public archive or not functioning.

    Remark: We may revise content or remove unrelated, outdated or no longer supported items.

    ✅ License

    Distributed under the MIT License. See LICENSE for more information.

    🙌 Acknowledgement

    from https://github.com/logicspark/awesome-vitepress-v1 

    ---------------------------------------------------------------

    相关帖子:

    搭建静态网站程序vitepress

     

    Markdown 批量导出工具-elog、开放式跨平台博客解决方案,随意组合写作平台

    .Notion/FlowUs/飞书/我来Wolai)和博客平台(Hexo/Vitepress/Halo.

    elog.1874.cool  

    而博客平台一般分为两类,一种是轻量化的,只负责渲染文档不提供编辑器,代表产品:

    • Hexo
    • Vitepress
    • HuGo

    一种是内容管理系统软件,相对上面这些比较重,初期涉及到数据库和手动部署,拥有自己的编辑器,代表产品:

    • WordPress
    • GHost

    Elog

    如果我既想用最熟悉、最舒适的编辑器,又想用主流的博客平台,怎么办呢?

    Elog就是为了解决这个问题而诞生的。

    Elog将这些平台揉合在一起,你可以随意组合写作平台和博客平台,目前支持:

    写作平台

    • Notion
    • 语雀
    • FlowUs
    • 飞书云文档
    • 我来

    博客平台

    • Hexo
    • Vitepress
    • HuGo
    • Docusaurus
    • Docz
    • Halo
    • Confluence
    • WordPress

    博客平台目前支持所有类似 Hexo 的框架:通过向指定目录存放 markdown 文档来进行渲染的方式

    🌅 图床功能

    和很多在线平台一样,Notion和语雀也同样存在图片防盗链的问题,直接将写作平台的图片链接放到其他站点的话,会加载不出来。 为了解决这个问题,Elog支持了在生成MD文件之前,将扫描到的图片上传到图床上,并对文档中的图片链接进行替换。 当前支持的图床有:

    • 本地
    • 腾讯云COS
    • 阿里云OSS
    • Github图床
    • 七牛云
    • 又拍云

    你也可以通过自定义图床插件的方式上传文档图片到任意图床

    社区图床插件

    ✨ 特性

    • 📝 写作平台支持语雀/Notion/FlowUs/飞书云文档
    • 🚀 博客平台支持所有通过渲染本地 Markdown 文档生成静态站点的博客平台
    • 🚀 博客平台支持Halo/Confluence/WordPress站点
    • 🌅 图床平台支持存放到本地或上传到阿里云/腾讯云/Github/七牛云/又拍云
    • 📦 支持生成Front Matter Markdown
    • ⚙️ 支持自定义文档处理适配器
    • 🛡 支持自定义图床插件

    更多详情见 ELog 开发计划

    🔨 快速上手

    Elog 使用文档

    备用文档地址1:https://1874.notion.site

    备用文档地址2:https://wordpress.1874.cool

    📦 开箱即用


    • FlowUs:仿Notion的国内文档产品,用了下还不错
    • 飞书云文档:也是一个很出色的在线协同文档工具,主打工作/团队场景,也有个人版
    • 语雀:阿里出品,笔者觉得很不错的一款在线编辑器,涵盖日常个人、工作所需要的各种场景,够用
    • Typora:一款出色的本地编辑器,支持实时预览和流程书写,可惜新版本收费了

    🔗 最佳实践

    • elog-docs 多写作平台云端写作 + vitepress + GitHub Action + GitHub Pages 持续集成 👉 Elog Docs

    from https://github.com/LetTTGACO/elog

    (https://github.com/elog-x/awesome-elog)